首页 > 代码库 > 父元素高度塌陷的解决办法

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

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

解决方法

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,两个盒子的外边距会发生一个叠加。

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