CSS 块级化上下文 BFC

Nian糕

修改于 2024-03-19 16:28:10

6060

修改于 2024-03-19 16:28:10

概念

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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.10.14 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css3

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css3

登录后参与评论

0 条评论

热度

CSS 块级化上下文 BFC

CSS 块级化上下文 BFC

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐