开发者社区> 问答> 正文

清除浮动和BFC的区别

使用清除浮动技术使父级元素高度计算时包括了内部浮动元素的高度,这种方式和通过触发BFC来包含内部浮动元素有什么区别?
附上Demo

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        div {
            border: 1px solid black;
            background: #ccc;
        }
        .red {
            background: red;
        }
        .blue {
            background: blue;
        }
        .box {
            width: 100px;
            height: 100px;
        }
        .big {
            width: 200px;
            height: 200px;
        }
        .left {
            float :left;
        }
        .right {
            float: right;
        }

        /*关键代码*/
        .bfc {
            overflow: hidden;
        }
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div class="box big right red"></div>
<div class="bfc">
    <div class="box blue left"></div>
    <div class="box blue left"></div>
    <div class="box blue left"></div>
</div>
</body>
</html>

screenshot

展开
收起
杨冬芳 2016-06-23 16:13:16 2125 0
1 条回答
写回答
取消 提交回答
  • 码农|Coder| Pythonista

    当换成:before以后 蓝色box不会计入灰色容器的高度计算中,所以我得出的结论是伪元素的位置偏移导致灰色容器高度的计算

    2019-07-17 19:46:31
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载