5分钟理解BFC原理

时间 2019-11-10

标签 5分理解 bfc 原理繁體版

原文原文链接

1、BFC概念

BFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，而且有一套渲染规则，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。html

具备 BFC 特性的元素能够看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，而且 BFC 具备普通容器所没有的一些特性。布局

通俗一点来说，能够把 BFC 理解为一个封闭的大箱子，箱子内部的元素不管如何翻江倒海，都不会影响到外部。flex

2、触发

只要元素知足下面任一条件便可触发 BFC 特性：spa

body 根元素
浮动元素：float 除 none 之外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 之外的值 (hidden、auto、scroll)

3、BFC的特性及应用

1.同一个BFC下外边距会发生重叠

代码以下

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>BFC</title>
    <style>    
        div{
            width:100px;
            height:100px;
            background:#f0f;
            margin:50px;
        }
    </style>
</head>    
<body>
    <div></div>
    <div></div>
<body>
</html>

运行结果以下图：

从效果上看，由于两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 因此第一个 div 的下边距和第二个 div 的上边距发生了重叠，因此两个盒子之间距离只有 50px，而不是 100px3d

使用BFC原理修改后的代码以下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>BFC</title>
    <style>
        .box{
            width:200px;
            margin:0 auto;
            overflow:hidden;
        }
        .btn{
            width:100px;
            height:100px;
            background:#f0f;
            margin:50px;
        }
    </style>
</head>    
<body>
    <div class="box">
        <div class="btn"></div>
    </div>
    <div class="box">
        <div class="btn"></div>
    </div>
<body>
</html>

这个时候，两个盒子之间的边距就是100px，运行结果以下图：

2.BFC 能够包含浮动的元素（清除浮动）

咱们都知道，浮动的元素会脱离文档流，看例子：code

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>BFC</title>
    <style>
        .box{
            width:300px;
            margin:0 auto;
            border:1px solid #000;
        }
        .float{
            width:100px;
            height:80px;
            background:#f00;
            float:left;
        
    </style>
</head>    
<body>
    <div class="box">
        <div class="float"></div>
    </div>
<body>
</html>

运行结果以下图：

因为浮动元素脱离文档流，因此容器只剩下了2px的高度，若是触发BFC，那么容器就会包裹浮动元素orm

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>BFC清除浮动的影响</title>
    <style>
        .box{
            width:300px;
            margin:0 auto;
            border:1px solid #000;
            overflow:hidden;
        }
        .float{
            width:100px;
            height:80px;
            background:#f00;
            float:left;
        }
    </style>
</head>    
<body>
    <div class="box">
        <div class="float"></div>
    </div>
<body>
</html>

运行结果以下图

3.BFC 能够阻止元素被浮动元素覆盖

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>BFC</title>
    <style>
        .box{
            width:300px;
            margin:0 auto;
            border:1px solid #000;
            overflow:hidden;
        }
        .float{
            width:100px;
            height:80px;
            background:#f00;
            float:left;
        }
        .right{
            width:200px;
            height:300px;
            background:#f0f;    
        }
    </style>
</head>    
<body>
    <div class="box">
        <div class="float"></div>
        <div class="right">我是一个没有浮动，没有触发BFC的元素.width:200px;
        height:300px;
        background:#f0f;</div>
    </div>
<body>
</html>

运行结果以下图：

这个时候，第一个浮动的元素已经覆盖了第二个元素，可是文本内容不会被覆盖，若是第二个元素触发BFC，即第二个元素添加overflow:hidden;就会变成htm

5分钟理解BFC原理

1、BFC概念

2、触发

3、BFC的特性及应用

1.同一个BFC下外边距会发生重叠

代码以下

运行结果以下图：

使用BFC原理修改后的代码以下：

这个时候，两个盒子之间的边距就是100px，运行结果以下图：

2.BFC 能够包含浮动的元素（清除浮动）

运行结果以下图：

运行结果以下图

3.BFC 能够阻止元素被浮动元素覆盖

运行结果以下图：

持续更新，欢迎你们指教！