清除浮动引起的高度塌陷的7种方法

float会引起高度塌陷问题。

触发条件：子元素全是float元素 且 父元素没有设置高度。

解决方法：

1.给父元素设置高度

2.设置一个空标签，并且给此标签加上

 clear:both;

3.

<br clear=both />

4.给父元素设置

overflow:hidden;

5.给父元素设置

overflow:auto;

6.给父元素设置浮动 float （副作用特别大）

 

7.完美解决方案：

假设：父元素是，并且高度塌陷

<div class="clearfix"</div>

解决代码(在样式中添加上)：

 

 

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