浮动及清除浮动

标题：浮动及清除浮动

1.浮动

特性：

1. 脱标
2. 行内块元素特性
3. 块级盒子没设置宽度时默认和父级一样宽、设置浮动后宽度根据内容决定
4. 设置浮动的元素间无缝隙、一行占不下会另起一行
5. 一行内顶端对齐排序

清除浮动：

1. 额外标签发、空标签必须是块级元素<div style="clear:both;"></div>
2. 父级添加overflow属性
3. 伪元素发
   :after伪元素发
   
   双伪元素清除浮动
   
   :after其实已经达到了清除浮动的目的，:before的设置目的是为了阻止margin-top的合并

clear:both;//清除左右两边浮动
content:" ";//包含一个空格是为了解决Opear浏览器bug，
font-size:0;也可以解决；没有这个会导致清除浮动元素的顶部底部有空白
display:table;触发块级上下文（BFC），块级上下文不重叠，浮动也是BFC，设置clear:both;伪元素插入的内容会挤到上下两端
设置diaplay:table;后content中内容会被渲染成0*0空白元素，不会占用页面内容