css之高度塌陷 clearfix

高度塌陷：父元素高度是被子元素撑开的，子元素无法撑起父元素的高度，导致父元素高度丢失。

那么，怎么解决高度塌陷呢？

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

• BFC是一个CSS的一个隐含的属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域。
• 元素开启BFC后的特点：
  1. 不会被浮动元素覆盖
  2. 子元素和父元素外边距不会重叠。
  3. 开启后父元素就可以包含浮动的子元素了。
• 开启方式：
  1. 设置元素的浮动（不推荐）
  2. 将元素设置为行内块元素（不推荐），
  3. 将元素overflow设置为一个非visible，常用overflow: hidden开启

还有一个方法是使用clear属性，

clear

• 作用：清除浮动元素对当前元素所产生的影响
• 可选值：
  • left 清除左侧浮动元素对当前元素的影响
  • right 清楚右侧元素对当前元素的影响
  • both 清除两侧中最大影响的那侧
• 原理：设置清除浮动以后，浏览器会自动为元素添加一个外边距，以使其位置不受其他元素的影响

总的来说，最终方案：（既可以解决外边距重叠，又可以解决高度塌陷）

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