BFC

最新推荐文章于 2021-08-17 14:54:22 发布

chen__cheng

最新推荐文章于 2021-08-17 14:54:22 发布

阅读量289

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/chen__cheng/article/details/115796679

css 专栏收录该内容

23 篇文章

订阅专栏

BFC

1.三种定位方案

1.普通流

元素按照其在HTML中的先后位置至上而下布局
行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行
所有元素默认都是普通流定位

2.浮动

元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移。在当前流上进行左右浮动，且当前元素所在的行被其他元素也使用。

3.绝对定位

元素整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响。

2.什么是BFC

其中BFC（块级格式化上下文）属于普通流，BFC是一块独立的渲染区域，且有自己的渲染规则，将BFC看作元素的属性，若某元素拥有了BFC，则该元素便形成了一个独立的容器，容器内的元素不会在布局上影响到外面的元素。

3.触发BFC条件

根元素(<html>)
浮动元素(元素的float不是none)
绝对定位元素（元素的position为absolute或fixed）
display为inline-block、table-cell、table-caption、table table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex、inline-flex、grid或inline-grid
overflow值不为visible的块元素
contain值为layout、content或paint的元素
多列容器（元素的column-count或column-width不为auto，包括column-count为1）

4.BFC作用

避免外边距重叠

查看以下场景

<div></div>
<div></div>

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

按一般想法两个div之间间距为200px，但是两个div之间只有100px，由于规范原因，使得产生外边距重叠现象，解决的方式，将两个div盒子形成两个独立的空间，这样当各自设置外边距的时候，不会对彼此产生影响。

解决：利用overflow:hidden触发BFC，使得div形成独立空间。

<div class="contant">
    <div class="box"></div>
</div>
<div class="contant">
    <div class="box"></div>
</div>

<style>
    // 触发BFC
.contant {
    overflow: hidden;
}

.box {
    width: 100px;
    height: 100px;
    background-color: #898989;
    margin: 100px;
}
</style>

清除浮动

查看以下场景

<div class="contant">
    <div class="box"></div>
</div>

<style>
	.contant {
        border: 1px solid red;
    }

    .box {
        width: 100px;
        height: 100px;
        background-color: #898989;
        float: left;
    }
</style>

结果为：由于给子元素添加了浮动，因此其脱离了文档流，使得父元素.contant没有内容将其撑开，因此父元素呈现一条直线的情况。

解决：利用overflow属性，触发父容器的BFC，使得其内的内容形成一个独立的容器，不管其内的内容如何去布局处理，也只是在独立的容器中。通过采取此方式从而达到清除浮动的作用。

.contant {
    border: 1px solid red;
    overflow: hidden; // 触发父容器的BFC
}

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
}

阻止元素被浮动元素覆盖

查看以下场景

<div></div>
<div></div>
<style>
div:nth-child(1) {
    width: 100px;
    height: 100px;
    background-color: #909090;
    float: left;
}

div:nth-child(2) {
    width: 200px;
    height: 200px;
    background-color: #008989;
}

</style>

由于第一个div盒子添加了浮动，因此其位置会被之后的第二个div盒子占用，使得两个div发生重叠

BFC_01
因此为了不让浮动元素遮住其他元素，因此可以给浮动元素之后的元素添加overflow:hidden触发其的BFC，从而形成独立空间，与浮动元素分开。

div:nth-child(1) {
    width: 100px;
    height: 100px;
    background-color: #909090;
    float: left;
}

div:nth-child(2) {
    width: 200px;
    height: 200px;
    background-color: #008989;
    overflow: hidden;
}