清除浮动的几种方式--css基础

清除浮动定义：指的是清除浮动的影响

使用场合：当子元素设置了浮动，父元素没有高度的时候，会造成页面布局混乱，这种情况下进行清除浮动。

清除浮动的几种方式

方式1：使用 clear:left | right | both 等

操作：
1.在要清除浮动的元素后面添加一个类.clearfix的标签
<div class="content">
     <div class="left"></div>
     <div class="right"></div>          
     <div class="clearfix"></div>
</div>

2.CSS设置
.clearfix{
    clear: both;
}

方式2：给父盒子设置 overflow: hidden（填充高度）

操作：CSS设置
.content {
    width: 500px;   
    background-color: pink;
    overflow: hidden;
}

说明：如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动。因为超出的部分就会被隐藏掉

方式3：使用伪元素清除浮动（较优化较友好）

操作：
1.html设置
<div class="content clearfix">
     <div class="left"></div>
     <div class="right"></div>              
</div>

2.CSS设置
.clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;    /*  block隐藏掉 */
    clear: both;
}
.clearfix{
    zoom:1;/*IE/7/6*/
}   

方式4：使用伪元素清除浮动（优化友好）

操作：
1.html设置
<div class="content clearfix">
     <div class="left"></div>
     <div class="right"></div>              
</div>

2.CSS设置
/***清除浮动中最常用和最好用的方法——小米官网中用到了*/
/*双伪元素 */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;   /*前后两个盒子在一行上*/
} 
.clearfix:after{ clear:both; }    
.clearfix{
    zoom:1;/*IE/7/6*/
}

方式5：使用bootstrap框架的辅助类.clearfix清除浮动（最官方 友好）

注意：首先得引入bootstrap的相关文件

  <div class="clearfix"></div>