父元素高度塌陷的解决办法

Posted 2020-09-28

很多时候子元素浮动的，会造成父元素塌陷

解决方法

1.添加一个空元素，并设置成清除浮动，即：

<div style="clear:both;"></div>

优点：通俗易懂，易于掌握

缺点：添加了无意义标签，不易于后期维护，违背了结构和表现的标准

 

2.给父元素添加 overflow：auto;

 

3.给父元素也浮动

缺点：影响整体页面布局，若父元素也有父元素呢？

 

4.使用after伪元素

给父元素添加一个类，即看不见的清除浮动的元素

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

 

5.最优解

首先我们说一个CSS的概念——BFC块级格式上下文，简单来说就是只要属性或方法触发了BFC就可以防止高度塌陷.

以下属性就是可以触发BFC的部分

flaot:left;
overflow:auto;
dispaly:table-cell;
dispaly:table-caption;
display:inline-block;
position:fixed;
position:absolute;

前面几个方法也是借助了这个原理，但都有些缺陷。下面我们来介绍一个比较优雅的方法来实现。

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

 加入before对于清除浮动没有影响，主要是为了解决浏览器顶部空白崩溃的问题。

例如：现有上下两个盒子，上盒子设置了margin-bottom：10px，下盒子设置了margin-top：10px，按理说两个盒子的上下距离应该是20px，但实际上只有10px，两个盒子的外边距会发生一个叠加。