当前位置：首页 > news >正文

BFC详解

news 来源：原创 2025/5/16 14:39:30

1.定义：

FC的全称为Formatting Conttext,元素在标准流里面

块级元素的布局属于Block Formatting Context(BFC)——即block level box都是BFC中布局

行内级元素的布局属于Inline Formatting Context (IFC)

2.那么在哪些情况下会创建BFC？

根元素(<html>)
浮动元素（元素的float不是none)
绝对定位元素（元素的position为absolute或fixed)
行内块元素(元素的display为inline-block)
overflow计算值(Computed)不为visible的块元素
弹性元素（display为flex或inline-flex元素的直接子元素)

3.BFC特点：

在BFC中，box会在垂直方向上一个挨着一个的排布
垂直方向的间距由margin属性决定
在同一个BFC，相邻两个box之间的margin会折叠
在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的

4.BFC作用：

解决边距重叠问题
解决高度塌陷问题

5.BFC如何解决边距重叠问题？

给box1的父盒子设置一个overflow: auto;box1在container的BFC里面，box2还在html的BFC里面→两两互不影响

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {overflow: auto;}.box1 {width: 500px;height: 200px;background-color: #582a2a;margin-bottom: 20px;}.box2{width: 500px;height: 200px;background-color: #582a2a;margin-top: 10px;}</style>
</head>
<body><div class="container"><div class="box1"></div></div><div class="box2"></div>
</body>
</html>

6.BFC如何解决高度塌陷问题？

(1)BFC解决高度塌陷需要满足两个条件：

浮动元素的父元素触发BFC，形成独立的块级格式化上下文
浮动元素的父元素的高度是auto

(2)BFC高度是auto的情况下，如何计算高度？

如果是inline-level,是行高的顶部和底部的距离
如果有block-level,是由最顶层的块上边缘和最底层块盒子的下边缘之间的距离
如果有绝对定位元素，将被忽略
如果有浮动元素，那么增加高度以包括这些浮动元素的下边缘

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {background-color:pink;/* 触发BFC */overflow: auto;}.item{width: 500px;height: 200px;border: 1px solid #000;float: left;background-color: #ff0;}</style>
</head>
<body><div class="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
</body>
</html>