二、BFC和Clearfix

郁子大约 2 分钟约 728 字笔记CSS

（一）高度塌陷和 BFC

1. 成因

2. 解决

  • 块级格式化环境 Block Formatting Context(BFC)，是一个隐含的属性
  • 通过设置某些已有样式为元素开启 BFC，使元素形成独立的布局区域

3. 元素开启 BFC 后具备的特点

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

4. 开启 BFC 的方法

  • 设置元素浮动：display: float;
    • 不推荐，宽度会丢失
  • 将元素设置为行内块元素：display: inline-block;
    • 不推荐，不适合外部元素，且宽度丢失
  • 将元素的 overflow 设置为一个非 visible 的值：overflow: hidden/auto;
    • 常用，但是也有代价，不是最佳解决方案

（二）清除浮动

  • 如果不希望某个元素因为其他元素浮动的影响而改变位置
  • 可以通过 clear 属性来清除浮动元素对当前元素所产生的影响

1. clear 属性

  • clear: left;
    • 清除浮动向左的元素产生的影响
  • clear: right;
    • 清除浮动向右的元素产生的影响
  • clear: both;
    • 常用
    • 清除左右浮动的元素中影响较大的一方产生的影响（上移高度较大者）

2. clear 属性解决高度塌陷

  • 可以解决，但是不推荐
  • CSS 产生的问题应该由 CSS 来解决
  • 凭空增加占用 div 会使 HTML 结构混乱
<div class="box1">
  <div class="box2"></div>
  <!-- 通过增加HTML结构解决CSS样式产生的高度塌陷问题 -->
  <div style="clear: both;"></div>
</div>

3. ::after 伪类解决高度塌陷

  • 最完美最常用的解决方案
<div class="box1">
  <div class="box2"></div>
</div>

.box1::after {
  content: "";
  clear: both;
  /* ::after伪类元素默认是行内元素，不会独占一行，设置为块元素才可以撑开父元素 */
  display: block;
}

（三）外边距重叠

1. 成因

  • 相邻元素在垂直方向上的边距会折叠
  • 不等时取较大者

2. ::before 伪类解决外边距重叠

  • 思路：让两个元素样式上不相邻
<div class="box1">
  <div class="box2"></div>
</div>

.box1 {
  width: 200px;
  height: 200px;
  background-color: #bfa;
}
.box1::before {
  content: "";
  /* table布局无内容时不占空间，同时结构上可以将两个元素隔开 */
  display: table;
  clear: both;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin-top: 100px;
}

（四）clearfix 同时解决高度塌陷和外边距重叠

  • 为需要清除浮动影响的元素添加 clearfix 类即可
  • 常用方法，推荐
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
上次编辑于: