zoukankan      html  css  js  c++  java
  • 块级格式化上下文

    块级格式化上下文

    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;
                 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;
                 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;
                 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
    
  • 相关阅读:
    C++高精度运算类bign (重载操作符)
    Spring4.0支持Groovy配置
    统计Oracle数据库文件的大小
    ThinkPHP pdo连接Oracle的配置写法,提示报错
    【PHP缩略图类】手机照片不能生成缩略图问题以及解决方式
    ping and traceroute(tracert)
    HDU-1053-Entropy(Huffman编码)
    Python学习之四【变量】
    linux mysql
    xorm
  • 原文地址:https://www.cnblogs.com/WindrunnerMax/p/12899965.html
Copyright © 2011-2022 走看看