什么是BFC布局——浅析BFC布局的概念以及作用

站长手记作者： 2024-08-28 06:55:01

BFC 可以简单的理解为某个元素的一个 CSS 属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC

BFC的定义：

通俗一点的方式解释:

BFC的触发条件

【1】根元素，即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed

BFC布局规则：

BFC布局规则1：内部的Box会在垂直方向，一个接一个地放置。

BFC布局规则2：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

BFC布局规则3：每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

<div class="parent">
    <div class="child"></div>
    //给这两个子div加浮动，浮动的结果，如果没有清除浮动的话，父div不会将下面两个div包裹，但还是在父div的范围之内。
    <div class="child"></div>
</div>

BFC布局规则4：BFC的区域不会与float box重叠：

<div></div>
<div>
    <div></div>
</div>
<!--下面是css代码-->
 .aside {
            width: 100px;
            height: 150px;
            float: left;
            background: #f66;
        }
  .main {
            height: 200px;
            overflow: hidden;//触发main盒子的BFC
            background: #fcc;
        }
  .text{
            width: 500px;
    }

BFC有哪些作用：

BFC作用1：自适应两栏布局

BFC 与 Layout

.parent {
            margin-top: 3rem;
            border: 5px solid #fcc;
            width: 300px;
        }
.child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
        }

BFC作用3：可以包含浮动元素——清除内部浮动

BFC的作用4：阻止margin重叠:

<div></div>
<div>
    <div></div>
</div>
<!--下面是css代码-->
 .aside {
            margin-bottom: 100px;//margin属性
            width: 100px;
            height: 150px;
            background: #f66;
 }
.main {
            margin-top: 100px;//margin属性
            height: 200px;
            background: #fcc;
 }
 .text{
            /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
            overflow: hidden;//此时已经触发了BFC属性。
}

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_69987.html