这篇文章主要介绍“CSS中BFC有什么作用”，在日常操作中，相信很多人在css中BFC有什么作用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css中BFC有什么作用”的疑惑
这篇文章主要介绍“CSS中BFC有什么作用”，在日常操作中，相信很多人在css中BFC有什么作用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css中BFC有什么作用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
什么是BFC（BlockFORMattinGContext）
Formattingcontext(格式化上下文)是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
而BlockFormattingContexts(BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则。具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
BFC的布局规则如下：
  1.内部的盒子会在垂直方向，一个个地放置；
  2.BFC是页面上的一个隔离的独立容器；
  3.属于同一个BFC的两个相邻Box的上下margin会发生重叠；
  4.计算BFC的高度时，浮动元素也参与计算
  5.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
  6.BFC的区域不会与float重叠；
那么如何触发BFC呢？只要元素满足下面任一条件即可触发BFC特性：
body根元素；
浮动元素：float不为none的属性值；
绝对定位元素：position(absolute、fixed)
display为：inline-block、table-cells、flex
overflow除了visible以外的值(hidden、auto、scroll)
BFC到底有什么用呢？
块格式化上下文对于定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。
1、同一个BFC下外边距会发生折叠
也就是说，两个相邻的普通流中的块元素垂直方向上的margin会折叠。
<style>
.p{
width:200px;
height:50px;
margin:100px0;
background-color:red;
}
</style>
<body>
<divclass="p"></div>
<divclass="p"></div>
</body>
这里两个p的外边距为100px，而不是200px。之所以发生外边距折叠，是因为他们同属于body这个根元素。
利用BFC可以消除MarginCollapse
BFC导致了margincollapse，而现在又要用它来解决margincllapse.但是始终要记住一点：只有当元素在同一个BFC中时，垂直方向上的margin才会clollpase.如果它们属于不同的BFC，则不会有margincollapse.因此我们可以再建立一个BFC去阻止margincollpase的发生。
<divclass="p"></div>
<divclass="wrap">
<divclass="p"></div>
</div>
.wrap{
overflow:hidden;
}
.p{
width:200px;
height:50px;
margin:100px0;
background-color:red;
}
2、BFC可以包含浮动的元素（清除浮动）
正常情况下，浮动的元素会脱离普通文档流，使父元素高度坍塌。即外层的p会无法包含内部浮动的p。
<divstyle="border:1pxsolid#000;">
<divstyle="width:50px;height:50px;background:#eee;float:left;">
</div>
</div>
但如果我们触发外部容器的BFC，根据BFC规范中的第4条：计算BFC的高度时，浮动元素也参与计算，那么外部p容器就可以包裹着浮动元素。
<divstyle="border:1pxsolid#000;overflow:hidden">
<divstyle="width:100px;height:100px;background:#eee;float:left;"></div>
</div>
3、BFC可以阻止元素被浮动元素覆盖/（两栏布局）
到此，关于“css中BFC有什么作用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
--结束END--
本文标题: css中BFC有什么作用
本文链接: https://lsjlt.com/news/93123.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0