清除浮动的方法

元素设置为float:left或者float:right之后，会脱离文档流，简单来讲，就是该元素的位置不属于该元素了。所以会造成浮动元素之后的元素替代占有该元素的位置。同样，也会造成父级元素高度不能自适应为子元素的高度。所以通常来讲，清除浮动的方式有以下几种，
1、设置父级元素overflow:hidden 触发BFC使父级元素自适应为子元素的高度。
2、在浮动元素之后增加一个没有实际作用的元素代替实际的元素替代浮动元素之后的元素受到浮动的影响，简单来讲，就是李代桃僵，借尸还魂。
3、clearfix方式

第三种实际是第二种的升级版，代码说明：
*** 未清除浮动： ***



 

 clear float
 


 
  子级元素1 
 子级元素2
  
其他元素

结果如下：

Paste_Image.png

很明显：父级元素未显示为蓝色，因为没有设置高度，也没有自适应为内容的高度，子元素1和子元素2浮动造成了自身脱离了文档流，其他元素受到影响，占据了浮动元素的位置。

overflow:hidden方式触发BFC




 
 clear float
 


 
  子级元素1 
 子级元素2
 
 其他元素

Paste_Image.png

设置父元素overflow:hidden 触发了BFC，父级高度自适应为内容高度，其他元素没有受到浮动的影响。

增加空元素清除浮动方式




 
 clear float
 


 
  子级元素1 
 子级元素2
 
 
 其他元素

相比最初的代码，新增了一个空元素

给.clear设置了clear:both，代替其他元素受到浮动的影响，也就是李代桃僵。
效果如下：

Paste_Image.png

:after 方式为空元素的升级版




 
 clear float
 


 
  子级元素1 
 子级元素2
 
 其他元素

效果如下：

Paste_Image.png

和第二种方式一样，也是利用空元素替代接受浮动的影响，只不过是 利用伪类:after 生成空元素， clearfix:after生成了一个‘ ’空元素，该元素宽高均为0，等同于第二种方式中的

"
"

，生成的元素在子级元素2之后。然后该元素同样有属性clear:both，同样的原理，清除了浮动的影响。 *zoom: 1;是在IE6 7下触发 hasLayout布局，清除浮动造成的影响。同样，由于清除垂直外边距合并也有用空元素的方式，让空元素代替和上面的元素发生合并，由于空元素 margin-top为0，所以清除了合并的影响，也同样如此，利用伪类:before也可以在元素内部第一个位置生成空元素，清除掉 collapse造成的影响。

转载于知乎，借鉴于知乎

清除浮动的方法

你可能感兴趣的:(清除浮动的方法)