浅谈BFC格局~

 好 买 网 IT技术交易平台

1.BFC含义💳

BFC全称： Block Formatting Contexts  块级元素格式化上下文

• W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系

• 一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型，不同类型的 Box，会参与不同的 Formatting Context（决定如何渲染文档的容器）

• BFC内部的元素和外部的元素不会互相影响~~🎈

2.BFC触发条件🔨

满足以下条件之一就可触发BFC

1. 根元素

2. float 的值不为 none

3. overflow 的值不为 visible

4. display 的值为 inline-block、table-cell、table-caption

5. 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在前端页面布局中十分常见也灰常重要~

本文来自博客园，作者：不知名前端李小白，转载请注明原文链接：浅谈BFC格局~ - 不知名前端李小白 - 博客园