标签：BFC box color 100px width 原理 margin 作用
1.BFC定义和布局规则
BFC（Block formatting context）译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level如何布局，并且与这个区域外部毫不相干。
BFC布局规则
（1）内部的box会在垂直方向，一个接一个地放置
（2）Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
（3）每个元素的margin box 的左边，会包含块border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此
（4）BFC的区域不会与float box 重叠
（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
（6）计算BFC的高度时，浮动元素也参与计算
2.哪些元素会生成BFC
（1）根元素
（2）float属性不为none
（3）position为absolute或fixed
（4）display为inline-block，table-cell，table-caption,flex,inline-flex
（5）overflow不为visiable
3.B FC的作用及原理
（1）自适应两栏布局
代码：
<style> body{ width: 300px; position: relative; } .aside{ width: 100px; height: 150px; float: left; background-color: antiquewhite; } .main{ height: 200px; background-color: aqua; } </style><body>
<div class="aside"></div>
<div class="main"></div>
</body>
页面：
根据BFC布局规则第三条：每个元素的margin box 的左边，会包含块border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此，同时再根据BFC布局规则第四条：BFC的区域不会与float box 重叠。那我们就可以通过触发main生成BFC，从而实现自适应两栏布局
.main{
height: 200px;
background-color: aqua;
overflow：hidden；
}
页面：
（2）清除内部浮动
代码：
<style>
.content{
border:5px solid floralwhite;
width: 300px;
}
.child{
border: 5px solid saddlebrown;
width: 100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="content">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
页面：
根据BFC布局规则第六条：计算BFC的高度时，浮动元素也参与计算。此时为了达到清除内部浮动，我们可以触发content触发生成BFC，那么content在计算高度时，content内部的浮动元素child也会参与计算
.content{
border:5px solid floralwhite;
width: 300px;
overflow:hidden;
}
页面：
（3）防止垂直margin重叠
代码：
<style>
p {
color: salmon;
background-color: seashell;
width: 200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
</style>
<body>
<p>box1</p>
<p>box2</p>
</body>
页面：
上面两个模块之间发生了margin重叠，而根据BFC布局规则第二条：Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。这样的话我们可以在p 元素外面包裹一层容器，并触发该容器生成一个BFC。那么两个p元素不属于同一个BFC，就不会发生margin重叠了。
代码：
.wrap{
overflow: hidden;
}
p {
color: salmon;
background-color: seashell;
width: 200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
<p>box1</p>
<div class="wrap">
<p>box2</p>
</div>
页面：
参考文字》》》https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
标签：BFC,box,color,100px,width,原理,margin,作用 来源： https://www.cnblogs.com/kbinblog/p/10919693.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。