清除浮动

清除浮动

为什么要清除浮动

父盒子不方便给高度时，但子盒子浮动就不占位置，父盒子高度坍塌，因此需要清除浮动。

清除浮动的本质

为解决父级元素因为子元素引起内部高度为0的问题，清除浮动后，父级就会根据浮动的子盒子自动检测高度，设置父级高度。

清除浮动的三种方式

在css中 使用clear 清除

选择器 {clear:属性值;} clear 清除

left 不允许left 有浮动

right 不允许right 有浮动

both 同时清除左右两侧浮动的影响

在实际工作中，几乎只用clear：both；

额外标签法

w3c推荐在后 为 clear 的div空盒子 设置clear：both属性；

缺点：增加了额外标签，不推荐使用。

给父级元素添加overflow方法

给父级元素 添加overflow:hidden auto scroll 都可以实现

优点 添加方式简单，容易造成不会自动换行 导致内容被隐藏掉，无法显示溢出的元素

使用after伪元素

:after 是 额外标签的升级写法，

.clearfix:after{content:"",display:block; height:0; clear:both; }

使用双伪元素清除浮动

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