BFC运行机制

最新推荐文章于 2022-03-17 14:50:53 发布

zuo_zuo_blog

最新推荐文章于 2022-03-17 14:50:53 发布

阅读量251

点赞数

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/115488299

版权

HTML/CSS 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

一、BFC概念

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

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

二、触发条件

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

三、BFC的特性及应用

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

<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，而不是 100px

使用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>

2.BFC 可以包含浮动的元素（清除浮动）

由于浮动元素脱离文档流，所以容器只剩下了2px的高度，如果触发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;
        }
    </style>
</head>    
<body>
    <div class="box">
        <div class="float"></div>
    </div>
<body>
</html>

3.BFC 可以阻止元素被浮动元素覆盖

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

<!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;  
            overflow:hidden;  
        }
    </style>
</head>    
<body>
    <div class="box">
        <div class="float"></div>
        <div class="right">我是一个没有浮动，没有触发BFC的元素.width:200px;
        height:300px;
        background:#f0f;</div>
    </div>
<body>
</html>

zuo_zuo_blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC运行机制

一、BFC概念BFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。二、触发条件body 根元素浮动元素：float 除 none 以外的值绝对定位元素：position (absolute、fixed) d
复制链接

扫一扫