浅谈BFC格局~

好买网 goodmai。com IT技术交易平台
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-...