使用 display : flow-root 触发 BFC - xiaoxustudy

使用 display : flow-root 触发 BFC

（在高度塌陷的笔记中有 BFC 的内容： https://www.cnblogs.com/xiaoxuStudy/p/13222253.html#fourone ）

目录：

父子盒子

兄弟盒子

父子盒子

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .div1{
                border: 2px solid red;
                /* display: flow-root */;
            }
            .div2{
                width: 100px;
                height: 200px;
                border: 4px solid green;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2"></div>
        </div>
    </body>
</html>

View Code

未使用 display : flow-root 前，高度塌陷

使用 display : flow-root 后

兄弟盒子

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .div1{
                width: 100px;
                height: 200px;
                border: 2px solid red;
                float: left;
            }
            .div2{
                height: 200px;
                border: 4px solid green;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
    </body>
</html>

View Code

未使用 display : flow-root 前

使用 display : flow-root 后

posted on 2020-07-04 22:03 xiaoxustudy 阅读(639) 评论(0) 收藏举报

刷新页面返回顶部