CSS 块级化上下文 BFC

Unsplash.jpg

概念
BFC(块级化上下文) 是一个独立渲染的区域，处于 BFC 内部的元素与外部的元素互相隔离，使内外元素的定位不会互相影响

创建 BFC 方式

• 根元素
• float 属性不为 none
• position 属性为 absolute 和 fixed
• display 属性为下列之一 table-cell, table-caption, inline-block, flex, inline-flex
• overflow 属性不为 visible (默认为 visible，需修改为 hidden, scroll, auto)

规则

• 内部的 box 会在垂直方向，一个接一个地放置

• BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

• BFC 不会与浮动元素重叠 => 利用 BFC 阻止文本换行

img { float: left; }
.content { overflow: hidden; }

<img src="Unsplash.jpg">
<div class="content">Lorem ipsum dolor sit, amet consectet...</div>

运行结果

• 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触，即使存在浮动也是如此

img { float: left; }
.content { overflow: hidden; margin-left: 210px; }

<img src="Unsplash.jpg">
<div class="content">Lorem ipsum dolor sit, amet consectet...</div>

运行结果

• box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 box 的 margin 会发生重叠 => 利用 BFC 消除 Margin Collapse

img {
  float: left;
}
.content {
  overflow: hidden;
}
.top {
  margin-bottom: 10px;
}
.bottom {
  margin-top: 20px;
}

<img src="Unsplash.jpg">
<div class="content">
  <div class="top">1. Lorem ipsum dolor sit...</div>
  <div class="bottom">2. Lorem ipsum dolor sit...</div>
</div>

运行结果

• 计算BFC的高度时，浮动元素也参与计算 => 利用 BFC 容纳浮动元素

img {
  float: left;
}
.content {
  overflow: hidden;
}
.top, .bottom {
  float: left;
}

<img src="Unsplash.jpg">
<div class="content">
  <div class="top">1. Lorem ipsum dolor sit...</div>
  <div class="bottom">2. Lorem ipsum dolor sit...</div>
</div>

运行结果

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^