CSS BFC学习笔记

最新推荐文章于 2024-02-03 14:52:19 发布

时间被海绵吃了

最新推荐文章于 2024-02-03 14:52:19 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签： BFC css

本文链接：https://blog.csdn.net/sunhengzhe/article/details/46995483

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

BFC，全称是Block Formatting Context，块级格式化上下文。
具体是什么，可以理解为页面元素的一种特性，触发了BFC的元素往往会产生一些对初学者而言意想不到的效果。
触发BFC的方法有下面几种，满足其中任意一种就能触发BFC：

浮动元素（float除了none以外任意值）
绝对定位元素（position为absolute或fixed）
display为inline-block或table-cell或table-caption
overflow为除了visible以外的其他值（hidden、auto或scroll）

那么BFC有哪些特点呢，为什么要触发BFC呢？先从几种现象说起吧。

一、外边距合并

有以下结构的html

<div>
    <p>这是一个段落</p>
</div>
<div>
    <p>这是一个段落</p>
</div>

CSS 如下

        body{
            margin: 0;
        }
        div{
            background-color: #2595e5;
            margin: 10px 0 10px;
        }
        p{
            background-color: #ff9900;
            margin: 10px 0 10px;
        }

产生效果：
这里写图片描述
代码里给div和p都加上了上下边距，但是产生的结果来看好像p标签的上下边距并没有生效，而且在垂直方向上，div的边距只有10px而不是两个10px，这其实是因为他们产生了外边距重叠。
简单地说，外边距合并指的是，在普通文档流中，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
如何避免这种效果的发生呢，这将引出BFC的第一个特性：

阻止和子元素发生外边距折叠

给div加上overflow：hidden属性，即触发BFC的第四个条件：

        div{
            background-color: #2595e5;
            margin: 10px 0 10px;
            /*触发BFC*/
            overflow: hidden;
        }

再看效果
这里写图片描述
由此可见，触发了BFC的元素，不和它的子元素发生外边距折叠。

二、高度塌陷

在使用浮动的时候，经常会出现这种情况：

<div class="outer">
    <div class="inner"></div>
</div>

CSS：

        body{
            margin: 0;
        }
        .outer{
            background-color: #2595e5;
            border: 1px solid #f00;
        }
        .inner{
            background-color: #ff9900;
            width: 50px;
            height: 50px;
            float: left;
        }

效果：
这里写图片描述
可以看到outer的高度是0，并没有算上内部浮动的inner，这种现象称之为高度塌陷。
BFC将能解决这个问题，这就是BFC的第二个特性：

包含浮动元素

同样的给outer加上overflow：

        .outer{
            background-color: #2595e5;
            border: 1px solid #f00;
            /*触发BFC*/
            overflow: hidden;
        }

产生效果：
这里写图片描述

三、元素被浮动元素覆盖

这个问题同样出现在有浮动元素的时候：

<div class="left"></div>
<div class="right"></div>

CSS:

        body{
            margin: 0;
        }
        .left{
            width: 50px;
            height: 50px;
            background-color: #2595e5;
            float: left;
        }
        .right{
            background-color: #ff9900;
            width: 100px;
            height: 100px;
        }

产生效果：
这里写图片描述
可以看到，浮动的元素覆盖在了其相邻元素上，解决这个问题将引出BFC的第三个特性：

阻止元素被浮动元素覆盖

对right添加overflow属性：

        .right{
            background-color: #ff9900;
            width: 100px;
            height: 100px;
            /*触发BFC*/
            overflow: hidden;
        }