BFC

BFC

技术杂谈小彩虹2021-08-24 12:20:46270A+A-

CSS盒模型(标准模型、IE模型)

触发BFC场景

  1. 根元素或包含根元素的元素
  2. 浮动元素(元素的 float 不是 none)
  3. 绝对定位元素(元素的 position 为 absolute 或 fixed)
  4. 行内块元素(元素的 display 为 inline-block)
  5. 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
  6. 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
  7. 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
  8. overflow 值不为 visible 的块元素
  9. display 值为 flow-root 的元素
  10. contain 值为 layout、content或 strict 的元素
  11. 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
  12. 网格元素(display为 grid 或 inline-grid 元素的直接子元素)
  13. 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
  14. column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。

代码效果图

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <section id="sec">
        <style>
            #sec {
                background-color: red;
                overflow: hidden;
            }

            .child {
                margin-top: 20px;
                height: 100px;
                background-color: yellow;
            }
        </style>
        <article class="child">
        </article>
    </section>

    <!-- BFC垂直方向边距重叠 -->
    <section id="margin">
        <style>
            #margin {
                background: pink;
                overflow: hidden;
            }

            #margin p {
                margin: 5px auto 25px;
                background: red;
            }
        </style>
        <p>1</p>
        <div style="overflow: hidden;">
            <p>2</p>
        </div>
        <p>3</p>
    </section>

    <h1 style="height: 40px;">BFC不与float重叠</h1>
    <!-- BFC不与float重叠 -->
    <section id="layout">
        <style media="screen">
            #layout {
                background: red;
            }

            #layout .left {
                float: left;
                width: 100px;
                height: 100px;
                background: pink;
            }

            #layout .right {
                height: 110px;
                background: #ccc;
                overflow: auto;
                /* 创建bfc */
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
    </section>

    <!-- BFC子元素即使是float也会参与计算 -->
    <h1 style="height: 40px;">BFC子元素即使是float也会参与计算</h1>
    <section id="float">
        <style media="screen">
            #float {
                background: red;
                overflow: auto;
                /* float: left; */
            }

            #float .float {
                float: left;
                font-size: 30px;
            }
        </style>
        <div class="float">我是浮动元素</div>
    </section>
    <div>直接在-BFC不与float重叠-元素下</div>
</body>

</html>

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们