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

栏目: CSS · 发布时间: 5年前

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

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特性(块级格式化上下文)

由图片可以看出，创建了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特性(块级格式化上下文)

<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_...

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Data Structures and Algorithm Analysis in Java

Mark A. Weiss / Pearson / 2006-3-3 / USD 143.00

As the speed and power of computers increases, so does the need for effective programming and algorithm analysis. By approaching these skills in tandem, Mark Allen Weiss teaches readers to develop wel......一起来看看《Data Structures and Algorithm Analysis in Java》这本书的介绍吧!

码农工具