标签：meta 常见 absolute 规范 list charset round 增加 规则
通俗点说，BFC就是一个独立的盒子，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
在文档呈现开始的时候，会自动创建一个BFC来对整个页面进行布局，在没有创建一个新的BFC的时候，整个文档就这一个BFC。
内部的box会在垂直方向，从顶部开始一个接着一个地放置（上面的例子可以看出）
同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此
BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
计算BFC的高度时，浮动元素也参与计算
根元素
float属性不为none（如：left | right）
overflow的值不为visible（如：hidden | auto | scroll）
display属性值为inline-block | flex | inline-flex | table-cell | table-caption
position为absolute或fixed
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
. overflow{
overflow: hidden;
}
.div-one{
margin-bottom:20px;
background: red;
}
.div-two{
margin-top:10px;
background: blue;
}
</style>
<div class="overflow">
<div class="div-one">
abc
</div>
</div>
<div class="overflow">
<div class="div-two">
def
</div>
</div>
</body>
</html>
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC清除内部浮动</title>
<style type="text/css">
.child {background-color: #95E1D3; border: 1px solid #FCE38A; width: 100px; height: 100px;float:left;}
.parent {width: 300px; border: 1px solid #95E1D3;float:left;}
/*.parent或者不用float:left;用overflow：hidden;*/
</style>
</head>
<body>
<div class="parent">
<div class="child">11</div>
<div class="child">22</div>
</div>
</body>
</html>
3.一个浮动，一个不浮动：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 400px; border: 1px solid #95E1D3;">
<div style="background-color: blue; border: 1px solid #FCE38A; width: 100px; height: 100px;float:left;">11</div>
<div style="background-color: red; border: 1px solid #FCE38A; width: 200px; height: 100px;overflow: hidden;">22</div>
<!--给上面这个div 加个overflow:hidden;使它成为一个bfc。-->
</div>
</body>
</html>
仅供参考。
标签：meta 常见 absolute 规范 list charset round 增加 规则
原文地址：https://www.cnblogs.com/caozhuzi/p/10976956.html
