【转】BFC-块级格式化上下文

wuaiqiu 发布于2019-08-29 12:24 / 1921人阅读

摘要：一布局规则内部的会在垂直方向排列。属于同一个的两个相邻的会发生重叠。每个元素的的左边，与包含块的左边相接触。计算的高度时，浮动元素也参与计算。因此会根据包含块的宽度，和的宽度，自动变窄。

BFC它是一个独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

一、BFC布局规则：

1、内部的Box会在垂直方向排列。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
3、每个元素的margin box的左边，与包含块border box的左边相接触。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时，浮动元素也参与计算。

二、哪些元素会生成BFC?

1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不为visible

三、BFC的作用及原理

自适应两栏布局

BFC

当触发main生成BFC后（去掉代码中注释即可），这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。效果如下

清除内部浮动

BFC

为达到清除内部浮动，我们可以触发par生成BFC（去掉代码中注释即可），那么par在计算高度时，par内部的浮动元素child也会参与计算。效果如下

防止垂直 margin 重叠

BFC

Haha

Hehe

我们可以在p外面包裹一层容器，并触发该容器生成一个BFC（去掉代码中注释即可）。那么两个P便不属于同一个BFC，就不会发生margin重叠了。效果如下

云服务器 GPU云服务器电脑上下载的视频怎么转换格式 bfc 快转视频格式 bfc布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111873.html

BFC 神奇背后的原理（转）

摘要：最常见的有简称和简称。根据布局规则第四条的区域不会与重叠。根据布局规则第二条垂直方向的距离由决定。同样的，当内部有浮动时，为了不影响外部元素的布局，计算高度时会包括浮动的高度。避免重叠也是这样的一个道理。 BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BF...

April 2019-08-29 12:56 评论0 收藏0
BFC 神奇背后的原理（转）

摘要：最常见的有简称和简称。根据布局规则第四条的区域不会与重叠。根据布局规则第二条垂直方向的距离由决定。同样的，当内部有浮动时，为了不影响外部元素的布局，计算高度时会包括浮动的高度。避免重叠也是这样的一个道理。 BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BF...

wawor4827 2019-08-01 17:07 评论0 收藏0
20170601-BFC(块级格式化上下文)

摘要：的全称是块级格式化上下文。浮动绝对定位的元素定位块容器属性为带有属性该属性值不为和的为的块级元素会在其内部建立新的块级格式化上下文。使用可以解决以下问题父子元素的上下合并问题文字围绕浮动元素的问题和子元素浮动导致父元素高度为的问题。 BFC BFC的全称是Block Format Content -- 块级格式化上下文。浮动、绝对定位的元素(absolute、fixed定位)、块容器(...

PAMPANG 2019-08-29 12:41 评论0 收藏0
20170601-BFC(块级格式化上下文)

摘要：的全称是块级格式化上下文。浮动绝对定位的元素定位块容器属性为带有属性该属性值不为和的为的块级元素会在其内部建立新的块级格式化上下文。使用可以解决以下问题父子元素的上下合并问题文字围绕浮动元素的问题和子元素浮动导致父元素高度为的问题。 BFC BFC的全称是Block Format Content -- 块级格式化上下文。浮动、绝对定位的元素(absolute、fixed定位)、块容器(...

weknow619 2019-08-01 16:56 评论0 收藏0
块级格式化上下文(BFC)

摘要：可以阻止元素被浮动元素覆盖浮动元素的块级兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素触发后可以阻止这种情况的发生。一、什么是BFC 具有BFC属性的元素也属于普通流定位方式，与普通容器没有什么区别，但是在功能上，具有BFC的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且具有普通容器没有的一些特性，比如包含浮动元素...

TerryCai 2019-08-29 15:22 评论0 收藏0