理解CSS中的“潜规则”BFC

最新推荐文章于 2024-04-27 17:15:07 发布

小鸡爱吃米

最新推荐文章于 2024-04-27 17:15:07 发布

阅读量173

点赞数 2

文章标签： css3

本文链接：https://blog.csdn.net/weixin_42880088/article/details/107899688

版权

之前学习前端一直没有听说过BFC，后来才知道这个概念，而且除了BFC，还有IFC、GFC和FFC，今天来总结一下什么是BFC。

FC

在说明BFC之前，需要大概了解一下什么是FC，FC是Formatting Contexts格式上下文，表示页面中一块渲染区域，并且有一套渲染规则，它决定了其子元素如何定位，以及和其他元素的关系和相互作用。

BFC

1、什么是BFC
BFC是Block Formatting Contexts块级格式化上下文，就如上边所说，BFC有着它自己的渲染规则，使用了BFC的元素会在页面上形成一个隔离的渲染区域，容器里边的子元素不会在布局上影响到外边的元素，反之也是如此。
通俗点说，BFC可以理解为一个与世隔绝的空间，在这个空间里不管发生什么，都不会影响外界或者被外界影响。
2、如何产生BFC
body根元素；
float的值不为none；
overflow的值不为visible；
position的值不为relative和static；
display的值为table-cell、table-caption、inline-block中的任何一个；
（任意一条实现即可产生BFC）

BFC特性及应用

1、在同一个BFC下，margin会发生折叠

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: aqua;
        margin: 100px;
    }
</style>
<body>
    <div></div>
    <div></div>
</body>

在这里插入图片描述
首先，body根元素其实也是一个BFC，而此时两个div都在这个大BFC中，这个时候因为BFC的一个特性，在同一个BFC下，margin会出现折叠的现象。
要想解决这个问题，需要把这两个div再分别生成一个BFC。

<style>
    p{
        width: 100px;
        height: 100px;
        background-color: aqua;
        margin: 100px;
    }
    .over {
        overflow: hidden;
    }
</style>
<body>
    <div class="over">
        <p></p>
    </div>
    <div class="over">
        <p></p>
    </div>
</body>

2、BFC可以包含浮动元素

 <div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: aqua;float: right;"></div>
 </div>

在这里插入图片描述
因为设置浮动会使当前元素脱离文档流，所以此时外边的div是包不住里边的div的，这个时候如果想要解决这个问题，我们可以使外边的div产生一个BFC。

<div style="border: 1px solid #000;overflow: hidden;">
  <div style="width: 100px;height: 100px;background: aqua;float: right;"></div>
</div>

在这里插入图片描述
3、BFC可以防止元素被浮动元素覆盖

<div style="width: 100px;height: 100px;float: left;background: aqua;">
   左浮动
</div>
<div style="width: 200px;height: 200px;background: #cccccc;">
    没有浮动
</div>

在这里插入图片描述
可以看到，这个时候因为浮动，第一个元素脱离了文档流，导致第二个元素并没有相对于第一个元素独立，解决这个问题的方法也很简单，只需要使第二个元素产生一个BFC。

<div style="width: 100px;height: 100px;float: left;background: aqua;">
   左浮动
</div>
<div style="width: 200px;height: 200px;background: #cccccc;overflow: hidden;">
    没有浮动
</div>

在这里插入图片描述

总结

总的来说，BFC使一个元素相对于其他元素独立，为了不影响外边的元素，同时也不让外边的元素影响自己，BFC会将浮动元素的高度计算出来，同时避免浮动造成的重叠。个人认为这也体现了计算机中单一职责的原则。

小鸡爱吃米

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
理解CSS中的“潜规则”BFC

之前学习前端一直没有听说过BFC，后来才知道这个概念，而且除了BFC，还有IFC、GFC和FFC，今天来总结一下什么是BFC。FC在说明BFC之前，需要大概了解一下什么是FC，FC是Formatting Contexts格式上下文，表示页面中一块渲染区域，并且有一套渲染规则，它决定了其子元素如何定位，以及和其他元素的关系和相互作用。BFC1、什么是BFCBFC是Block Formatting Contexts块级格式化上下文，就如上边所说，BFC有着它自己的渲染规则，使用了BFC的元素会在页面
复制链接

扫一扫