css里的BFC的用法

LadyZhong

2019-06-28

关注关注

一、对BFC的了解

Block Formatting Contexts (BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则

（可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素）

二、如何触发BFC

只要元素满足下面任一条件即可触发 BFC 特性：

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

三、BFC的布局规则

内部的盒子会在垂直方向，一个个地放置；

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
属于同一个BFC的两个相邻Box的上下margin会发生重叠；
计算BFC的高度时，浮动元素也参与计算
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
BFC的区域不会与float重叠；

BFC的应用

1、解决margin重叠问题

示例：

<!doctype html>    
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
.container {
    background-color: red;
    overflow: hidden;
    width:200px;
    }
    
    p {
    margin: 10px 0;
    background-color: lightgreen;
    width:200px;
}
.newBFC {
    overflow: hidden;
}



</style>

</head>
<body>
<div class="container">
    <p> 1</p>
    <p> 2</p>
    <div class="newBFC">
        <p> 3</p>
    </div>
</div>

</body
</html>

运行结果

解析：1和2margin重叠了；为了让3不跟1，2一样只用在3上面加一个overflow: hidden。

2、解决浮动高度塌陷问题

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BFC浮动问题</title>
    <style>
        .one {
            /* 文档流 里面的文字标签将父元素撑起来 */
            background-color: pink;
            background-color: pink;
            overflow: hidden;

        }
        .two {
            float: left;
        }
    </style>
</head>
<body>
    <!-- 文档流 从上到下,当遇到float、position：absolute时，会离开文档流 -->
    <div class="one">
    <div class="two">Hello World!</div>
    </div>
    你好世界！
</body>
</html>

运行结果：

css里的BFC的用法

解析：第一幅图是浮动塌陷了，为了解决这个问题只用在.one标签上加上overflow: hidden;

三、解决侵占浮动元素的问题

示例：

<!doctype html>    
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
    .dsj{height: 100px;
        width: 100px;
        float: left;
        background: #ff0}
        
        
    .jfj{
        width: 200px;
        height: 200px;
        background: #eee; 
        overflow:hidden;
    }
</style>
<body>
<div class="dsj">1</div>
<div class="jfj">2</div>
</body>    
</html>