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

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

解决方法：

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

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

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

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

3.让父元素也浮动

缺点：影响整体页面布局，若父元素也有父元素呢？总不能一直浮动到body吧？

4.使用after伪元素

给父元素添加一个类，来添加一个看不见的块元素，以实现清除浮动。

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

优点：这个方法和第一种方法有点类似，但实际没有在页面上添加无意义标签，是页面结构更完整。

5.最优解

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

以下就是可以触发BFC的部分样式

flaot: left | right;
overflow: auto | hidden | scorll;
dispaly: table-cell | table-caption | inline-block;
position: fixed | absolute;

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

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

table属性可以创建一个匿名的表格单元，也会触发BFC。

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

例如：现有上下两个盒子，上盒子设置了margin-bottom：10px，下盒子设置了margin-top：10px。

按理说两个盒子的上下距离应该是20px，但实际上只有10px，两个盒子的外边距会发生一个叠加。

触发BFC即可解决这一问题。

　　----------------------------------------分割线（2017-9-21 更新）-------------------------------------

W3C是这样定义BFC的：

　　http://www.w3.org/TR/CSS2/visuren.html#block-formatting

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。

在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。

在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。(谷歌翻译)

BFC有一下特性：

-----------------------------------------------------------------------------------------------------------------------------

　　现在我们只需在每个浮动的元素添加一个 clearfix类就可以解决高度塌陷的问题是不是很简单呢？

　　以上是笔者的一些见解，有不当之处，欢迎指正~

发布了1 篇原创文章 · 获赞 7 · 访问量 3万+

私信关注