啥叫BFC？

一时失言乱红尘 2024-03-26 08:04 63阅读 0赞

#### 1.1什么是BFC？ ####

常见布局方式：

1.普通流

*  1.元素按照其在 HTML中的先后位置至上而下布局
 *  2.行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行
 *  3.所有元素默认都是普通流定位

![4783fb41b6224e3c936715ef77279316.png][]

2.浮动

*  元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移

![a4fb6124d4114d11ac49a12219a0e501.png][]

3.绝对定位

*  元素脱离普通流，不受其他影响

![0c8c36eaf27146ab9bd83699fdcffc9a.png][]

`BFC` 全称：`Block Formatting Context`， 名为 “块级格式化上下文”。 属于普通流。 它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC视作一个属性。

#### 1.1.1如何触发BFC？ ####

*  根元素： body ；
 *  (子)元素设置浮动： float 除 none 以外的值；
 *  (子)元素设置绝对定位： position ( absolute、fixed )；
 *  (父) display 值为： inline-block 、 table-cell 、 table-caption 、 flex 等；
 *  (父) overflow 值为： hidden 、 auto 、 scroll ；

#### 1.1.2BFC作用和特性？ ####

*  **避免外边距margin重叠** ， 由于BFC是一个独立的区域，内部的元素和外部的元素互不影响， 将两个元素变为两个BFC，就解决了margin重叠的问题 。

外边距重叠现象（两个margin合并）：

![78030b26cf4349c8895ad3ec4f77c9be.png][]

BFC处理：

![1f69f70bdc99418dbcef1084a79de384.png][]

*  **清除浮动（解决高度塌陷问题）**： 在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度 变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置 overflow:hidden 。

浮动脱离文档流（不包裹）：

![1d308c41d37f4a8199e985cc863f1bec.png][]

![8969086de7b04c85a0c740a713da64fa.png][]

*  **避免被浮动元素覆盖**。

未添加浮动元素被浮动元素覆盖：

![a77a6bc57eb645eabd8240ab9da6535a.png][]

为红色添加BFC

![6edc837f135145aaa6a1d51b116333e9.png][]

*  自适应两栏布局，原理同上一条。点击这里了解[自适应两栏布局][Link 1].
    
    .left\{ float: left;\}
    
    .right\{overflow:hidden;\}
    
    这样右边就触发了 BFC ， BFC 的区域不会 与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。

reference：主要整理—[BFC][]

[4783fb41b6224e3c936715ef77279316.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e671769078e84891a47f01b74f82d15a.png
[a4fb6124d4114d11ac49a12219a0e501.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f5befd4795d048178f1f22699d00154a.png
[0c8c36eaf27146ab9bd83699fdcffc9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6bdf98459c2b46b789dcc772c084871a.png
[78030b26cf4349c8895ad3ec4f77c9be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1fb117cd521548d4987c631058edad2a.png
[1f69f70bdc99418dbcef1084a79de384.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4990972197af4eacbd33aee0cd43e8ef.png
[1d308c41d37f4a8199e985cc863f1bec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/174ddc0082a04b75b6644d67a7b71a54.png
[8969086de7b04c85a0c740a713da64fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/17a1557cd6d74a59a208cd3c68fc12e4.png
[a77a6bc57eb645eabd8240ab9da6535a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a294fa88bb3c471fb4460eb2ef132a97.png
[6edc837f135145aaa6a1d51b116333e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b9731c63f4bd414a9b23fbe1e58b2985.png
[Link 1]: https://blog.csdn.net/weixin_29007135/article/details/119398280?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167653113216782428613190%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=167653113216782428613190&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-119398280-null-null.142%5Ev73%5Econtrol_1,201%5Ev4%5Eadd_ask,239%5Ev1%5Einsert_chatgpt&utm_term=%E5%88%9B%E5%BB%BA%E8%87%AA%E9%80%82%E5%BA%94%E4%B8%A4%E6%A0%8F%E5%B8%83%E5%B1%80&spm=1018.2226.3001.4187
[BFC]: https://www.bilibili.com/video/BV1aZ4y1M7gW/?spm_id_from=333.337.search-card.all.click&vd_source=bf637755c9052f97476e66c4e37ff80b