专栏首页Czy‘s Blog块级格式化上下文

块级格式化上下文

块级格式化上下文

BFC块级格式化上下文Block Formatting Context,是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域,是用于布局块级盒子的一块渲染区域,并且与这个区域的外部毫无关系,是一个独立的区域,是一个环境。

触发BFC

  • 根元素<html>
  • 浮动元素,元素的float不是none
  • 绝对定位元素,元素的positionabsolutefixed
  • 行内块元素,元素的displayinline-block
  • 表格单元格,元素的displaytable-cell
  • 表格标题,元素的displaytable-caption
  • 匿名表格单元格元素,元素的displaytabletable-rowtable-row-grouptable-header-grouptable-footer-groupinline-table
  • overflow值不为visible的块元素。
  • display值为flow-root的元素。
  • contain值为layoutcontentpaint的元素。
  • 弹性元素,displayflexinline-flex元素的直接子元素。
  • 网格元素,displaygridinline-grid元素的直接子元素。
  • 多列容器,元素的column-countcolumn-width不为auto,包括column-count1

BFC应用

避免浮动溢出

<!DOCTYPE html>
<html>
<head>
    <title>避免浮动溢出</title>
    <style type="text/css">
        .parent{
            border: 1px solid #eee;
        }
        .child{
            float: left;
            width: 100px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 未使用BFC -->
    <!-- 浮动元素超出父容器 -->
    <div class="parent">
        <div class="child"></div>
    </div>

    <!-- 清除浮动 示例分隔 -->
    <div style="clear: both;height: 20px;"></div>

    <!-- 使用 display: flex; 触发BFC -->
    <!-- 浮动元素全部处于父容器中 -->
    <div class="parent" style="display: flex;">
        <div class="child"></div>
    </div>
</body>
</html>

避免外边距合并

<!DOCTYPE html>
<html>
<head>
    <title>避免外边距合并</title>
    <style type="text/css">
        .parent{
            border: 1px solid #eee;
        }
        .child{
            height: 100px;
            width: 100px;
            margin: 10px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 未使用BFC -->
    <!-- 外边距合并 -->
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>

    <!-- 示例分隔 -->
    <div style="height: 20px;"></div>

    <!-- 使用 display: flow-root; 触发BFC -->
    <!-- 外边距独立计算 -->
    <div class="parent" >
        <div class="child"></div>
        <div style="display: flow-root;">
            <div class="child"></div>
        </div>
    </div>
</body>
</html>

避免浮动文字环绕

<!DOCTYPE html>
<html>
<head>
    <title>避免浮动文字环绕</title>
    <style type="text/css">
        .parent{
            border: 1px solid #eee;
        }
        .child{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 未使用BFC -->
    <!-- 文字环绕于子元素 -->
    <div class="parent">
        <div class="child"></div>
        <div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
        </div>
    </div>

    <!-- 清除浮动 示例分隔 -->
    <div style="clear: both;height: 20px;"></div>

    <!-- 使用 display: inline-block; 触发BFC -->
    <!-- 文字不环绕于子元素 -->
    <div class="parent" >
        <div class="child"></div>
        <div style="display: inline-block;">
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
        </div>
    </div>
</body>
</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.jianshu.com/p/0d713b32cd0d
https://segmentfault.com/a/1190000009624181
https://segmentfault.com/a/1190000013514597
https://blog.csdn.net/qq_41257129/article/details/89641726
https://blog.csdn.net/sinat_36422236/article/details/88763187
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Position定位

    CSS中position属性是比较常用的元素定位方案,position常用的取值有static、relative、absolute、fixed、sticky、i...

    WindrunnerMax
  • FLEX布局

    FLEX布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持。

    WindrunnerMax
  • Vue中$refs的理解

    $refs是一个对象,持有注册过ref attribute的所有DOM元素和组件实例。

    WindrunnerMax
  • 零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧

    上一节,我们学习了hbuilder的快速开发工具的简单实用,本机额,我们来介绍这个工具相关的快速开发技巧。

    刘金玉编程
  • HTML&CSS书写规范

    第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

    用户1149564
  • APICloud开发者进阶之路|【案例源码】简单时间轴

    因为想做透明头部,但是win页面打开frm页面后,会遮住win页面的头部,所以就取消了win页面的header标签,下面是win页面的代码:

    APICloud
  • jQuery第二十一篇 scrollTop

    用户7873631
  • jQuery第十三篇 内容选择器(:empty :parent :contains(text) :has(selector)

    用户7873631
  • Python爬虫获取豆瓣电影并写入excel

    这篇文章主要介绍了Python爬虫获取豆瓣电影并写入excel ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考...

    python学习教程
  • FLEX布局

    FLEX布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持。

    WindrunnerMax

扫码关注云+社区

领取腾讯云代金券