一、概念
BFC：块级格式上下文
注意：针对块级元素有效，内联元素参考IFC(行级格式上下文)
MDN中的解释：
一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
创建方式：
- 根元素或其它包含它的元素
- 浮动元素 (元素的
float不是none)- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
- 内联块(元素具有
display: inline-block)- 表格单元格 (元素具有
display: table-cell，HTML表格单元格默认属性)- 表格标题 (元素具有
display: table-caption, HTML表格标题默认属性)- 具有
overflow且值不是 visible的块元素，该方式副作用最小display: flow-rootcolumn-span: all应当总是会创建一个新的格式化上下文，即便具有column-span: all的元素并不被包裹在一个多列容器中。
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。块格式化上下文对于定位 (参见float) 与清除浮动 (参见clear) 很重要。 定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。
二、布局规则：
- 内部元素垂直方向从上到下依次排布
- Box垂直方向的距离由
margin决定，同一个BFC下的盒子之间会有外边距塌陷的问题 - 如果存在浮动的话，盒子的
margin-left挨着左边盒子的border-right - BFC区域不会和float Box重叠
- BFC就是页面上一个隔离的独立容器，容器里面的子元素和容器外面的元素互不影响
- 计算BFC的高度的时候，浮动根元素的高度也会被计算上
三、BFC的作用
3.1 避免垂直外边距重叠
3.1.1 同级兄弟元素之间的垂直边距重叠：
上面元素的margin-bottom和下面元素的margin-top会取较大值，而不是两者求和，这就是边距塌陷
<!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>
#box1 {
height: 200px;
background-color: red;
margin-bottom: 50px;
}
#box2 {
height: 200px;
background-color: blue;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
页面效果：
可以将其中一个元素用div包裹，并将div设置成BFC，最简单的做法就是给div设置overflow：hidden。
记住，一定要包裹一层块级元素，直接给这个元素设置overflow是没有用的
<!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>
#box-wrap {
overflow: hidden;
}
#box1 {
height: 200px;
background-color: red;
最低0.47元/天 解锁文章
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
