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 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式