高度塌陷及其解决方法

1.高度塌陷

在浮动布局中，父元素高度默认被子元素撑开。当子元素浮动时，其会脱离文档流，此时将无法撑起父元素的高度，导致父元素高度丢失。

2.块级格式化环境BFC（Block Formatting Context）

BFC时CSS中一个隐含属性，可以为一个元素开启BFC，开启BFC后该元素会变成一个独立的布局区域。

开启后的特点：

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

开启BFC：

• 设置元素浮动
• 将元素设置为行内块元素
• 将元素的 overflow 设置为非 visible 的值（常用）

3.clear元素的使用

原理：

设置清除浮动后，浏览器会自动为元素加上一个外边距，使其元素不受其他元素影响。

作用：

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

可选值：

• left 清除左侧元素对浮动的影响
• right 清除右侧元素对浮动的影响
• both 清除两侧中最大的一侧

4.clearfix类：

在消除高度塌陷问题时，除以上方法外，还可使用伪类来消除高度塌陷问题。clearfix可同时解决高度塌陷和外边距重叠问题。

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