常见的几种清除浮动（高度塌陷）的方法？

常见的几种清除浮动（高度塌陷）的方法？

我们经常把解决高度塌陷问题叫做清除浮动。

高度塌陷问题------指父元素高度自适应（即父元素不设置高度或高度为auto，这时的父元素就靠子元素来撑开），子元素浮动float后，造成父元素高度为0的问题。

高度塌陷解决方法一：

给父元素设置高度。缺点就是父元素无法高度自适应，因为子元素的高度不确定，若把父元素的高度定死，则一旦浮动的子元素高度大于父元素的高度，会出现子元素高度溢出的情况。

 

高度塌陷解决方法二：

给父元素添加overflow：hidden；原理是触发了BFC（BFC就是块级格式化上下文）。优点是父元素高度可以因内容多少自适应。缺点就是父元素边框之外的部分会被隐藏（这个隐藏指的是具有定位position的子元素，因为定位不是高度不高度的问题），另一方面overflow：hidden；的含义是溢出隐藏的意思，有些时候我们就是要子元素超出父元素框的部分要显示出来，若给子元素添加position：relative；定位后再设置left、top、bottom、right为负值，则溢出父元素框的部分会被隐藏。如二级菜单的影响。

 

高度塌陷解决方法三：

在浮动的子元素末尾，添加一个空的div，并设置样式:

div{ clear: both; height: 0; overflow: hidden; }

加上height和overflow是为了兼容IE6，因为IE6中不能识别最小高度的容器。

原理：在父容器的最后，添加一个空div，由于这个div并没有浮动，所以它是可以撑开父容器的高度的，然后在对其进行清除浮动，这样可以通过这个空div来撑开父元素的高度。

优点：可以自适应，溢出部分不会被隐藏。

缺点：页面中需要多加载一个盒子，而该div盒子无任何内容，显得代码冗余。

 

高度塌陷解决方法四：

给父元素添加伪元素after。即在父元素的末尾添加内容。样式为

.box:after{ content: “” ; display: block; clear:both; overflow: hidden; visibility:hidden}

本身伪元素是内联元素，所以需要display转换为块元素。

visibility：hidden；是官方给出的，为了确保万无一失，即为了确保这个content添加的内容在空间上是存在的。

 

BFC简单讲解：

根据W3C的标准，页面中的元素都隐含一个属性叫Block Formatting Context简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

当开启元素的BFC以后，元素将会具有如下的特性：

1. 父元素的垂直外边距不会和子元素重叠
2. 开启BFC的元素不会被浮动元素所覆盖
3. 开启BFC的元素可以包含浮动的子元素

可以触发BFC的属性：

1. 设置元素的浮动（但是用来解决父容器的塌陷问题时父容器也会出现脱标）
2. 设置元素的绝对定位（同样如1，父容器会出现脱标）
3. 设置元素为inline-block（设置为行内块那么margin：auto也就不会生效了）
4. 将元素的overflow设置为一个非visible的值（解决高度塌陷影响最小的属性）

其实还有两个清除浮动的方法，但是及其不推荐使用。这两种方法如下：

1. display：table；不推荐使用，会产生未知问题
2. 父元素跟着一起浮动，不推荐使用，需要解决新的浮动问题