HTML5浮动
1.标准文档流组成
块级元素（block）
内联元素（inline）
2.display属性
作用：指定HTML标签的显示方式
常用属性
| 值 | 说明 |
| block | 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符 |
| inline | 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符 |
| inline-block | 行内块元素，元素既具有内联元素的特性，也具有块元素的特性 |
| none | 设置元素不会被显示 |
3.display使用技巧
1、块级元素与行级元素的转变（block，inline）
2、控制块元素排成一行（inline-block）
3、控制元素的隐藏（none）
4.浮动属性
| 属性值 | 说明 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 默认值。元素不浮动，并会显示在其文本中出现的位置 |
5.clear属性
| 值 | 说明 |
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左、右两侧不允许浮动元素 |
| none | 默认值。允许浮动元素出现在两侧 |
6.解决父级边框塌陷
1、clear属性可以清除浮动对其他元素造成的影响，可是依然解决不了父级边框塌陷问题，怎么办？
浮动元素后面加空div
设置父元素的高度
父级添加overflow属性
父级添加伪类after
2、浮动元素后加空div
3、设置父元素的高度
4、父级添加 overflow属性
overflow属性：溢出处理
| 属性值 | 说明 |
| visible | 默认值。内容不会被修剪，会呈现在盒子之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
5、父类添加伪类after
7.清除浮动，防止父级边框塌陷的四种方法
浮动元素后面加空div
简单，空div会造成HTML代码冗余
设置父元素的高度
简单，元素固定高会降低扩展性
父级添加overflow属性
简单，下拉列表框的场景不能用
父级添加伪类after
写法比上面稍微复杂一点，但是没有副作用，推荐使用
8.display：inline-block与float
display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格
IE 6、IE 7上不支持
float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式