CSS - 清除浮动问题

做到一道题：

(单选题)  浮动会导致页面的非正常显示，以下几种清除浮动的方法，哪个是不推荐使用的?

A 在浮动元素末尾添加一个空的标签例如

B 通过设置父元素overflow值为hidden

C 父元素也设置浮动

D 给父元素添加clearfix类

解析：

A. clear属性不允许左右有浮动元素。浮动元素末尾加一个空元素，并设置样式clear：both，就相当于在这个元素的前后行添加足够的清除空间，父元素会自动获取高度。可以解决高度坍塌问题。

B. 在添加overflow属性后(值为hidden或者auto)，浮动元素又回到了容器层（即父元素），把容器高度撑起，达到了清理浮动的效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 。

C. 父元素添加浮动就会整体浮动影响布局

D.  给父元素设置class=“clearfix”，style中设置：

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

相当于在浮动元素后面添加一个看不见的块，并给块赋予clear:both的属性。

注意：IE8以上和非IE浏览器才支持:after。且，为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

zoom的使用：https://www.jb51.net/css/40285.html

 

 

参考：

[1]. https://www.jb51.net/css/173023.html

[2]. https://www.jianshu.com/p/09bd5873bed4

[3]. http://www.cnblogs.com/ForEvErNoME/p/3383539.html