CSS学习18：清除浮动

为何要取消浮动？

1、父元素没有高度

2、子元素浮动

3、父元素的大小撑不起来，影响接下来的布局。

---

清除浮动的多种方式

1、给父级添加 overflow 属性

overflow:hidden | auto | scroll;

优点：代码简洁

缺点：无法显示溢出的部分

注意：是给父元素添加代码

---

2、父级添加after伪元素

给父元素直接添加：

.clearfix:after {  
   content: ""; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  
 } 
 .clearfix {  /* IE6、7 专有 */ 
   *zoom: 1;
 }   

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

代表网站： 百度、淘宝网、网易等

---

 3、父级添加双伪元素

给父元素添加

 .clearfix:before,.clearfix:after {
   content:"";
   display:table; 
 }
 .clearfix:after {
   clear:both;
 }
 .clearfix {
    *zoom:1;
 } 

优点：代码更简洁

缺点：照顾低版本浏览器

代表网站：小米、腾讯等