CSS 的 BFC 和 触发BFC

最新推荐文章于 2024-07-17 12:03:48 发布
最新推荐文章于 2024-07-17 12:03:48 发布
阅读量266 收藏
点赞数
分类专栏： 前端 css 文章标签： css 前端 BFC
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/piaoliangj/article/details/120976096
版权
前端 同时被 2 个专栏收录
33 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏

文章目录

BFC 和 触发BFC

1.常见定位方案
  • 普通流 (normal flow)

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

  • 浮动 (float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

  • 绝对定位 (absolute positioning)

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

2.BFC是什么

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

3.触发/创建 BFC

简洁版：

  • body根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • display ( inline-block、table-cells、flex )
  • overflow 除 visible 以外的值 ( hidden、auto、scroll )

详细版：

  • 根元素（<html>）
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display为 inline-block）
  • 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的 display为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
  • overflow 计算值(Computed)不为 visible 的块元素
  • display值为 flow-root 的元素
  • contain 值为 layout、content或 paint 的元素
  • 弹性元素（display 为 flex 或 inline-flex元素的直接子元素）
  • 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
  • 多列容器（元素的 column-count 或 column-width (en-US)不为 auto，包括 ``column-count 为 1）
  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

块格式化上下文包含创建它的元素内部的所有内容.

4.BFC 特性及其应用

  • 同一个 BFC 下外边距会发生折叠

    解决外边距塌陷：将其放在不同的 BFC 容器中

  • BFC 可以包含浮动的元素

    清除浮动：父元素触发 BFC

  • BFC 可以阻止元素被浮动元素覆盖

参考文章：
MDN官网的BFC

律己以严
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端CSS必知：BFC及其触发条件
清颖的博客
08-08 6605
文章目录1. bfc的理解（块级格式化上下文）2. 触发bfc的方式：3. bfc解决的问题：外边距合并，检测浮动高度，制作右侧自适应盒子4. bfc布局规则特性：5. 两栏布局6. 补充：7. 块元素高度不设或宽度不设的情况。 将本人好久之前的 云笔记 搬到博客上来，统一维护。 1. bfc的理解（块级格式化上下文） 可以看作是隔离了的独立容器，内部元素的布局，不会影响外部元素。 可通过css属性触发。 浮动元素产生了浮动流，块级元素看不到； 文本类属性的元素（inline)，文本元素和产生了bfc的元
BFC理解及运用BFC解决css bug
Msinwln的博客
06-13 1861
BFC理解及运用BFC解决css bug Block Formatting Context (“块级格式化上下文”) 的缩写即为 BFC BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 每个盒子（块盒与行盒）的margin
css中的bfc是什么？如何会触发
子玉的博客
01-12 519
7. 匿名表格单元格元素（display 属性为 table、table-row、table-row-group、table-header-group、table-footer-group 之一）。当一个元素触发 BFC 后，它会按照 BFC 的规则来进行布局，与其他元素相互影响时会有特定的行为，例如阻止浮动元素重叠、清除浮动、自适应父元素等。BFC中的元素垂直排列，一个块级元素紧跟在另一个块级元素的下方。BFC中的浮动元素会被包含在BFC中，不会影响到外部元素的布局。BFC中的元素不会与浮动元素重叠。
CSS中的BFC详细讲解（易懂）
weixin_57677300的博客
02-16 7308
一个BFC区域只包含它的子元素，不包含其子元素的子元素。成为一个BFC区域要满足一定的条件。不同的BFC区域相互独立，互补影响。BFC是属于普通流的，我们可以把BFC看成页面的一块渲染区，他有自己的渲染规则，简单来说就是BFC可以看做元素的属性，当元素有了BFC这个属性，这个元素可以看做隔离了的容器，容器里面的元素不会在布局上影响到外面的元素。
什么是BFC机制，如何触发BFC（消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷）
qq_40261601的博客
02-25 1876
简单来说，BFC提供了一个独立的布局环境，BFC中的元素布局不受外部元素的影响，也不会影响到外部元素。触发BFC的几种方式1、给元素设置浮动 float: left | right2、给元素设置脱离文档流的定位 position: absolute | fixed3、给元素设置内容溢出 overflow: hidden | scroll |auto4、给元素设置 display: flex | inline-block | table-cell。几种常见问题：1、父级外边距折叠塌陷问题2、margi
关于CSS中BFC的那些事
a小灰灰呀的博客
06-13 370
CSS，BFC，父子元素外边距重叠如何解决，布局中高度塌陷了如何解决
css巧妙构造BFC
zqjflash的专栏
01-22 990
BFC（block formatting context，中文翻译为块级格式化上下文）是W3C CSS2.1规范中的一个概念，它会决定元素如何对其内容进行定位，以及与其它元素的关系和相互作用。     在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互
10分钟理解CSS BFC原理及其应用
09-27
当父元素触发BFC（如设置`overflow: hidden`），它会自动扩展以包裹所有浮动的子元素。 3. **防止元素被浮动元素覆盖**：BFC可以帮助防止非浮动元素被内部的浮动元素覆盖。通过创建BFC，元素会保持其正常布局，不会...
CSS布局基础BFC
09-27
BFC可以通过多种方式触发，如浮动、绝对定位、overflow不为visible的块级元素等。理解BFC对于解决CSS布局问题，如浮动元素塌陷、清除浮动、防止元素重叠、创建自适应布局等具有重要意义。通过熟练掌握BFC，开发者...
CSS理解块级格式上下文（BFC）
12-13
1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（块级...满足以下条件之一都可以触发BFC，变身为BFC 根元素 float属性不为none position不为
CSS使用BFC规则布局引发外层div包裹内层div的处理方法
12-13
它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个div内部，我们用float和margin布局元素。 BFC布局规则：1.内部的Box会在垂直方向，一个...
集合！！！——CSS中BFC机制详解，彻底吃透BFC机制
最新发布
2201_75842578的博客
07-17 414
（Block Formatting Context，BFC）块级格式化上下文，触发bfc机制的盒子内部会独立渲染，不会影响外部元素的布局也不会收到外部元素的影响。简单来讲就是CSS中有几种文档流模式决定了元素如何布局，有时包含块中的元素会受到外部元素影响，或影响外部元素的布局，此时我们想解决这种影响就可以使包含块创建BFC形成一个独立的布局环境（下面会举例子）。
何为css中的BFC？
qq_48643318的博客
08-20 562
BFC，高度塌陷， 布局，两列布局，三列布局，自适应布局 ，块级格式化上下文
CSS中的BFC详解：定义、触发方式及应用场景
小王的技术库
05-25 3546
1.什么是BFC? BFC就是一个css的一个布局概念，是一个独立的区域，是一个环境。 Block Formatting Context：块级格式化上下文。 W3C的官方解释： 它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。 BFC的目的：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。 2.如何触发BFC? float不为non
CSS之BFC
从来无所求，所得皆惊喜！
06-04 1335
BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
【CSS】什么是BFC？BFC有什么作用？
m0_61049675的博客
02-05 2773
BFC(block formatting context)块级格式化上下文，他是页面中的一块渲染区域，并且有一套属于自己的渲染规则，BFC 是一个独立的布局环境，具有BFC特性的元素可以看作是隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素。：只需要把两个div放置不同BFC中，那这两个BFC的内容将不会互相干扰，将两个di分别放置container容器中，然后通过overflow:hidden触发BFC;：这是因为给子元素添加了浮动，使它脱离了文档流；：红色方框覆盖蓝色方块；
BFC是什么？怎么触发BFC?
weixin_42560424的博客
05-10 600
BFC是“块级格式化上下文”的缩写，是一个独立的渲染区域，内部的元素按照一定规则进行布局，不会影响到外部元素的布局。BFC主要用于解决一些常见的布局问题，例如清除浮动、防止margin重叠等。
CSS中 BFC的用法
weixin_72303943的博客
07-19 499
BFC的用法
css中的BFC是什么
06-06
BFC，即块级格式化上下文（Block Formatting Context），是 CSS 中的一个概念，用于控制块级元素的布局和浮动元素的交互行为。 BFC 是一个独立的渲染区域，具有一定的属性和行为，它内部的元素按照一定的规则进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值