怎么解决父元素高度塌陷

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

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

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

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

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

3. 让父元素也浮动

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

4. 使用 after 伪元素

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

5. 最优解

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