高度崩塌和垂直外边距重叠的问题

高度崩塌

高度崩塌是由于子元素浮动或定位导致脱离文档流之后不能撑开父元素导致的。

解决方案

1、开启父元素 BFC

BFC Block Formatting Context 块级格式化环境

默认关闭的，是一个隐含属性

可以通过一些特殊的样式来 开启 BFC

开启 BFC 之后的元素具备以下特性

• 父元素的垂直外边距不会与子元素重叠
• 开启 BFC 的元素不会被浮动元素所覆盖
• 开启 BFC 的元素可以包含浮动子元素

开启 BFC 的方式

• 设置元素浮动
• 设置元素绝对定位
• 设置元素类型为 inline-block
• 设置 overflow 为一个非默认值，一般为 overflow：hidden 开启。

2、清除浮动

在塌陷的父元素的最后添加一个空白的 div，然后对该 div 进行清除浮动

<div id="box1">
  <div id="box2"></div>
  <div style="clear:both"></div>
</div>

问题：页面中添加了多余的结构

关于清除浮动

清除其他浮动元素对当前元素的影响

可选值：

• none，默认值，不清除浮动
• left，清除左浮动对当前元素的影响
• right 和 both 类推。

3、清除浮动的进阶版本

使用伪元素来避免 dom 结构混乱

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

垂直外边距重叠的问题

子元素的垂直外边距会传递给父元素，导致全部撑开。

解决方案

在子元素前面放一个空的 table 标签，table 会隔离这个传递。

也可以使用伪元素 before 来处理

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

合并解决方案

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