CSS之清除浮动的几种方法

为什么要清除浮动？

在标准流的布局中，一个父盒子下有多个子盒子时，如果不给定高度，父盒子会随着子盒子的高度而撑开。

然而当我们给子盒子浮动的属性后，由于浮动的块级元素不占标准流的块级元素的位置，父盒子并未随着子盒子的高度而撑开，而是“坍缩”成一个高度为0的块级元素。这会影响父盒子下面块级元素的布局。

所以清除浮动，是为了不影响其他元素，消除浮动带来的影响。

清除浮动的几种方法。

1、父级元素设置高度。

直接给定父盒子height一个值。方法简单但是很多环境下不是很实用。

 

2、额外标签法。

在浮动子元素末尾加入一个空标签例如

<div style= “clear:both”></div>

从而闭合了浮动产生的影响

3、overflow法。

这种方法是为了触发BFC条件,要求overflow不为visible即可，所以我们可以在父元素加入样式overflow: hidden|auto|scoll都可以达到清除浮动的效果。

4、伪元素法。

给需要清除浮动影响的元素加入clearfix标签

然后在样式表加入：

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   
.clearfix {*zoom: 1;}  

或者：

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

 

zoom: 1是为了兼容IE6-7浏览器，触发 hasLayout。

display: table也是为了触发BFC条件

 

与额外标签法原理相同，区别在于不用加如新的标签，使代码布局更加简洁。

外链:https://slartbartfast.cn/articlePage.php?articleid=235