做网站职校选什么专业,网站建设需求网,4.8 wordpress 插件,网站开发讲座心得体会块格式化上下文是块级盒子的布局过程发生的区域#xff0c;也是浮动元素与其他元素交互的区域。
块格式化上下文(BFC)的创建
满足以下条件将创建块格式化上下文#xff1a;
根元素#xff08;#xff09;浮动元素#xff08;float 值不为 none#xff09;绝对定位元素…块格式化上下文是块级盒子的布局过程发生的区域也是浮动元素与其他元素交互的区域。
块格式化上下文(BFC)的创建
满足以下条件将创建块格式化上下文
根元素浮动元素float 值不为 none绝对定位元素position 值为 absolute 或 fixed行内块元素display 值为 inline-block表格单元格display 值为 table-cellHTML 表格单元格默认值表格标题display 值为 table-captionHTML 表格标题默认值匿名表格单元格元素display 值为 table、table-row、 table-row-group、table-header-group、table-footer-group分别是 HTML table、tr、tbody、thead、tfoot 的默认值或 inline-tableoverflow 值不为 visible、clip 的块元素display 值为 flow-root 的元素contain 值为 layout、content 或 paint 的元素弹性元素display 值为 flex 或 inline-flex 元素的直接子元素如果它们本身既不是 flex、grid 也不是 table 容器网格元素display 值为 grid 或 inline-grid 元素的直接子元素如果它们本身既不是 flex、grid 也不是 table 容器多列容器column-span 值为 all 的元素始终会创建一个新的 BFC
块格式化上下文(BFC)的布局规则
在块格式化上下文中从包含块的顶部开始一个接一个地垂直排列框。两个同级框之间的垂直距离由“margin”决定。块格式上下文中相邻块级别框之间的垂直边距折叠。在块格式化上下文中每个框的左外边缘与包含块的左边缘接触对于从右到左的格式化右边缘接触。即使在存在浮点数的情况下也是如此尽管框的行框可能会由于浮点数而收缩除非框建立了新的块格式化上下文在这种情况下框本身可能会因为浮点数而变得更窄。
块格式化上下文(BFC)的作用
清除浮动的影响 BFC元素可以用来清除浮动的影响因为如果不清除子元素浮动则父元素高度塌陷必然会影响后面元素布局和定位这显然有违BFC元素的子元素不会影响外部元素的设定。清除边距重叠 BFC元素是不可能发生margin重叠的因为margin重叠是会影响外面的元素的
