摘要：实例从实例上可以看到，元素的外边距会触碰到包含块容器的外边框，也就是元素左边与容器左边相接触，与浮动元素发生了重叠。实例此时发现高度会重新被撑开，所以计算的高度浮动元素也会参与计算
BFC
首先BFC的英文全称Block Format Context，也就是块级格式化上下文。
BFC特性首先，我们大家都知道的BFC特性：
内部的元素会在垂直方向，从顶部一个接一个的放置
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
BFC的区域不会与float box重叠。
BFC就是页面一个独立的容器，容器里面的元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动元素也会参与计算
创建BFC方法下面也是大家都熟悉的创建BFC的方法
根元素
float不为none
overflow不为visible
display为table-cell,table-caption,inline-block,flex,inline-flex,flow-root其中最后一个为专门创建BFC的属性
position为absolute,fixed
实例 实例1从实例1可以看到特性1，内部元素会从顶部一个接一个的放置，并且属于同一个BFC的两个相邻的margin会发生重叠。如何解决边距重叠的问题呢？此时我们需要给元素套上一个父元素，将父元素变成BFC。
实例
这样便可以解决边距重叠问题。
实例2从实例2上可以看到，元素的外边距会触碰到包含块容器的外边框，也就是元素左边与容器左边相接触，与浮动元素发生了重叠。
当右面元素触发BFC的时候，不会与左面元素发生重叠，见实例
实例3当两个子元素都进行浮动时，此时父元素的高度会消失，第六个特性，计算BFC的高度时，浮动元素也会参与计算，此时我们触发父元素的BFC。实例
此时发现高度会重新被撑开，所以计算BFC的高度浮动元素也会参与计算
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113797.html
摘要：译文理解中的块级格式化上下文块级格式化上下文是网页视觉渲染的一部分，并用于决定块盒子的布局。根据所言浮动绝对定位元素为或行内块元素表格单元格表格标题以及属性值不为的元素除了该值被传播到视点的情况将创建一个新的块级格式化上下文。 CSS > 译文：理解CSS中的块级格式化上下文 Original Author: Ritesh Kumar Original Article: http:/...
摘要：期如何理解中定义块格式化上下文，是页面的可视化渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 20190416期 如何理解CSS中BFC? 定义: 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 BFC 特性及应用 同一个...
阅读 374·2023-04-26 02:08
阅读 1755·2021-11-18 10:02
阅读 3273·2021-11-11 16:55
阅读 2225·2021-08-17 10:13
阅读 2767·2019-08-30 15:53
阅读 536·2019-08-30 15:44
阅读 2361·2019-08-30 11:10
阅读 1627·2019-08-29 16:57
