CSS - 清除浮动问题

做到一道题：

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

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

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

C 父元素也设置浮动

D 给父元素添加clearfix类

解析：

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

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

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

D. 即给父元素增加class="clearfix"，然后在样式中设置：

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

.clearfix{
    zoom:1;
}

(1)其实也是在浮动元素后面加一个height为0的块，并且clear:both; display:block；visibility:hidden；

display：block；即将此元素显示为块级元素，自为一行。
visibility：hidden；就是不显示，但是所占位置没有被清除。

(2) zoom(IE专有属性)可解决ie6,ie7浮动问题 

zoom:
设置或检索对象的缩放比例
normal |  | 

注意：IE8以上和非IE浏览器才支持:after

 

 

总结：

解决办法1：在父元素里&&浮动元素的后面加一个块，并左右清除浮动。

解决办法2：让父元素包含浮动元素，

 

参考：

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

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

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