CSS BFC特性(块级格式化上下文)

2019年9月7日 109次阅读 来源: heath_learning

1、元素的BFC特性

BFC全称为”Block Formartting Context”，中文为”块级格式化上下文”。它是页面中的一块独立的渲染环境，并且有一套渲染规则，
它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相互作用。

BFC布局规则：

1）bfc内部的元素会在垂直方向，一个接一个地放置
2）盒子垂直方向的距离有margin决定，属于同一个bfc的两个相邻元素的margin会发生重叠
3）每个盒子的左外边缘(margin-left)会与其父元素的左边缘(border-left)相接触
4）bfc的区域会通过变窄来自适应而不会与float元素重叠在一起
5）bfc的高度计算时，浮动元素也参与计算。即创建了新的bfc的元素的高度会把内部浮动元素的高度也算进去
6）bfc是页面上一个隔离的独立容器，容器内的子元素不会影响到外面的元素；同理容器内的子元素也不会影响到父元素外面的
其他元素。

创建BFC的条件：

a）html元素
b）float的值不为none
c）overflow的值为auto、hidden或scroll
d）display的值为table-cell、inline-block、table-caption、flex、inline-flex
e）position的值不为relative和static

2、BFC作用—-理解BFC(个人理解)

1、因为bfc内部的元素与外部的元素绝对不会互相影响，因此当bfc元素的兄弟元素有浮动时，它不应该影响bfc内部元素的布局，
所以bfc会通过变窄来自适应，而不会与浮动元素发生重叠；

2、同样的，当bfc内部有浮动时，为了不影响外部元素的布局，bfc计算高度时会把浮动元素的高度也计算进去。
利用bfc避免margin重叠也是同样的道理。

3、BFC应用之：利用bfc特性实现左侧不固定，右侧也不固定的布局

《CSS BFC特性(块级格式化上下文)》

图片来自：张鑫旭–粉丝群第1期CSS小测点评与答疑
如图：这种布局在移动端一般比较常见，左侧文字宽度不固定，右测文字宽度不固定，文字断行后也要保持同样的行距。在移动端中可以使用flex布局，grid布局，如果不使用css3布局，我们能否实现呢？答案是可以的，可以使用 浮动+bfc 特性！

<style>
    body,dl,dd,dt,p{ padding: 0;margin: 0; }
    dl{
        width: 30%;
        padding: 10px;
        border: 1px solid #ccc;
        margin: 10px auto;
    }
    dt{
        float: left; margin-right: 25px;
    }
    dd{
        margin-bottom: 10px;
        word-break: break-all;
        text-align: left;
/* 为dd元素创建一个bfc，根据bfc布局规则第4条，bfc的区域会通过变窄来自适应而不会与float元素重叠在一起，
所有这就达到了我们想要的效果。 */
        overflow: hidden;
    }
</style>

<dl class="dl2">
    <dt>手机系统</dt>
    <dd>Android</dd>
    <dt>登录方式</dt>
    <dd>QQ互联登录</dd>
    <dt>绑定事件</dt>
    <dd>2019-01-02 00:01</dd>
    <dt>其他</dt>
    <dd>FAsfsdafsadfasdfSDsadfsadfsd4545454555454545sdafsdf</dd>
    <dt>备注</dt>
    <dd>如果需要修改绑定，请联系HR进行修改！</dd>
</dl>

下图是dd创建了bfc与未创建bfc的对比：
《CSS BFC特性(块级格式化上下文)》
《CSS BFC特性(块级格式化上下文)》

由图片可以看出，创建了bfc的dd的宽度自适应的变窄了，而未创建bfc的dd却与浮动的dt重合了。

4、BFC应用之：利用bfc特性解决margin塌陷问题

margin塌陷是一般指在标准文档流中，两个垂直排列的元素，一设置个margin-bottom，另一个设置margin-top，此时两个元素的margin就会发生重叠。
margin重叠规则：

1）margin的值都为正数时，取它们之间较大的值
2）margin的值都为负数时，取两个margin绝对值中较大的值
3）两个margin一正一负时，取两个margin相加的和

margin塌陷与不塌陷效果：
《CSS BFC特性(块级格式化上下文)》

《CSS BFC特性(块级格式化上下文)》

<style>
    body,dl,dd,dt,p{ padding: 0;margin: 0; }

    .float-container{
        width: 30%;
        margin: 50px auto;
        padding: 10px;
        border: 1px solid #ccc;
        overflow: hidden;
    }
    .float-box{
        /* 元素浮动后就创建了bfc，两个元素就创建了两个bfc，根据BFC布局规则第5条，.float-container的高度会把浮动元素的高度也计
        算进去；根据BFC布局规则第2条，两个.float-box分别创建了2个bfc，因此它们之间的margin并不会重叠 */
        float: left;
        width: 100%;
        height: 60px;
        margin: 20px 0;
        color: #fff;
    }
    .float-box:nth-child(1){background-color: #ccc;}
    .float-box:nth-child(2){background-color: #f10;}

    .no-bfc-container{
        width: 30%;
        margin: 50px auto;
        padding: 10px;
        border: 1px solid #ccc;
    }
    .no-bfc-box{
        height: 60px;
        margin: 20px 0;
        color: #fff;
    }
    .no-bfc-box:nth-child(1){background-color: #ccc;}
    .no-bfc-box:nth-child(2){background-color: #f10;}
    .bfc-box{
        /* 根据BFC布局规则第2条，.bfc-box创建了一个bfc，与第一个.no-bfc-boxbu元素不属于同一个bfc，因此两个.no-bfc-box元素的
        margin也不会发生重叠 */
        overflow: hidden;
    }
</style>

<body>
    <div class="float-container">
        margin未塌陷
        <div class="float-box">margin: 20px 0;</div>
        <div class="float-box">margin: 20px 0;</div>
    </div>
    <div class="no-bfc-container">
        margin塌陷
        <div class="no-bfc-box">margin: 20px 0;</div>
        <div class="bfc-box">
            <div class="no-bfc-box">margin: 20px 0;</div>
        </div>
    </div>
</body>

6、参考文章

1、https://www.zhangxinxu.com/wo… (引导文章)
2、https://www.zhangxinxu.com/wo…
3、https://www.w3cplus.com/css/u…
4、https://blog.csdn.net/w362427…
5、https://blog.csdn.net/shadow_…

    原文作者：heath_learning
    原文地址: https://segmentfault.com/a/1190000017969917
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞