讲不清楚的 BFC
2020-12-04 本文已影响0人
我是Msorry
BFC 没有定义，只有功能和特性，所以讲不清楚
CSS规范中对 BFC 的描述
浮动，绝对定位元素，非块盒的块容器（例如，
inline-blocks，table-cells和table-captions）和overflow不为visible的块盒会为它们的内容建立一个新的块格式化上下文
在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由
margin属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并
在一个块格式化上下文中，每个盒的 left 外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right 边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）
MDN 对 BFC 的描述
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
BFC 的创建方式
- 根元素（
<html>） - 浮动元素（
float） - 绝对定位元素（
position:absolute或position:fixed） - 行内块元素（
display:inline-block） - 表格单元格（
display:table-cellHTML表格单元格默认为该值） - 表格标题（
display:table-captionHTML表格标题默认为该值） - 匿名表格单元格元素（元素的
display为table、``table-row、table-row-group、``table-header-group、``table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或inline-table） -
overflow不为visible的块元素 -
display:flow-root创建 BFC 不产生其他副作用 -
contain值为layout、content或paint的元素 -
display值为flex或inline-flex元素的直接子元素 -
display值为grid或inline-grid元素的直接子元素 - 多列容器（元素的
column-count或column-width不为auto，包括column-count为1）
BFC 的功能
功能1：父元素包住子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.parent{
border:5px solid red;
}
.child{
height:100px;
background: green;
float:left;
width:400px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
image.png
红色的父元素没有创建 BFC ，包不住绿色的子元素
用 BFC 包住内部子元素，使得内部子元素不会影响外部的元素（并不是清除浮动）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.parent{
border:5px solid red;
display:flow-root; /*触发BFC*/
}
.child{
height:100px;
background: green;
float:left;
width:400px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
image.png
BFC父元素 只能包住子元素，不能包住其 BFC子元素的后代元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.parent{
border:5px solid red;
display: flow-root; /*触发BFC*/
}
.child{
float:left;
height:100px;
background: green;
width:400px;
margin-top: 100px;
}
.grandchild{
background: blue;
width:200px;
height:20px;
margin-top: 120px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<div class="grandchild"></div>
</div>
</div>
</body>
</html>
image.png
蓝色的后代元素并没有被红色包住
功能2：兄弟之间划清界限
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box1{
width: 100px;
min-height: 600px;
border: 3px solid red;
float: left;
margin-right: 20px;
}
.box2{
min-height: 600px;
border: 5px solid green;
background: rgba(0,128,128,0.5);
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
image.png
浮动的 box1 出现在 box2 的上层，box2 和 box1 的界限不清不楚
BFC 隔离兄弟元素的影响
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box1{
width: 100px;
min-height: 600px;
border: 3px solid red;
float: left;
}
.box2{
display:flow-root;
min-height: 600px;
border: 5px solid green;
background: rgba(0,128,128,0.5);
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
image.png
对 box1 和 box2 设置间隙，在 box1 上加
margin，在 box2 设置可能会失效（margin > box2.width 时才会生效）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box1{
width: 100px;
min-height: 600px;
border: 3px solid red;
float: left;
margin-right:10px;
}
.box2{
display:flow-root;
min-height: 600px;
border: 5px solid green;
background: rgba(0,128,128,0.5);
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
