1.BFC含义💳 BFC全称: Block Formatting Contexts 块级元素格式化上下文
W3C CSS 2.1 规范中的一个概念,它是一个独立容器,决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型,不同类型的 Box,会参与不同的 Formatting Context(决定如何渲染文档的容器)
BFC内部的元素和外部的元素不会互相影响~~🎈
2.BFC触发条件🔨 满足以下条件之一就可触发BFC 根元素 float 的值不为 none
overflow 的值不为 visible
display 的值为 inline-block、table-cell、table-caption
position 的值为 absolute 或 fixed
3.BFC布局规则🔒 浮动的元素会被父级计算高度(父级触发了BFC) 非浮动元素不会覆盖浮动元素位置(非浮动元素触发了BFC) margin不会传递给父级(父级触发了BFC) 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 BFC 是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素 计算 BFC 的高度时,浮动元素也会参与计算 BFC 的区域不会与 float box 重叠 3.BFC作用🔧 ◾ 1)自适应两栏布局
◾ 2)可以阻止元素被浮动元素覆盖
◾ 3)可以清除内部浮动
◾ 4)可以阻止margin重叠
BFC在前端页面布局中十分常见也灰常重要~
本文来自博客园,作者:不知名前端李小白,转载请注明原文链接:https://www.cnblogs.com/libo-web/p/15457210.html