清除浮动的几种方式--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清除浮动（最官方 友好）

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