问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

清除浮动和BFC的区别

头像
灰の物语
    1923

    使用清除浮动技术使父级元素高度计算时包括了内部浮动元素的高度，这种方式和通过触发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>

    当使用.clearfix时
    图片描述

    当使用.bfc时

    图片描述

    这时红色box和左边的灰色容器是两个独立的bfc 这个我比较好理解。
    第一种情况下灰色容器并没有触发bfc，而灰色的容器在尾部添加了一个清除浮动伪元素后，将自身外的红色box元素高度计算在内,导致这一计算结果的原因我的理解是
    这个伪元素的位置偏移导致父元素在自身计算高度时不得不将这个位置信息计算在内
    这个理解是否正确？

    csshtml
    阅读 5.4k
    5 个回答
    得票最新
    头像
    灰の物语
      1923
      ✓ 已被采纳

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

      头像
      拾指相扣
        3.3k2417
        头像
        userdhf
          87297498

          1.“清浮动”只是一个简单说法，应该理解为“消除浮动影响”；而不是“浮动”本身；
          2.只有触发了bfc才能使得元素独立计算(重绘和重排)父子兄弟元素之间的位置关系；
          ============以下更正===========
          1.首先说什么情况会触发bfc：根元素，浮动元素，溢出非可视，内连块/表格单元，固定/绝对定位；
          2.因此，第一个div(对应为右侧红色div)已经触发其bfc，当左边也使用bfc时，自然两个各自渲染各自的区块，二者宽度之和是浏览器宽度；
          3.当使用before时，需要提醒你一点的是，你给右侧方块宽高固定值了，如果此时你去掉宽高，里面为空时，左侧的高度并没有受到影响，宽度等于浏览器宽度；
          4.当你给右侧不指定宽高时，在里面放一个高度比较高也有宽度的内容时，就会发现左侧区块高度发生了变化，宽度为浏览器宽度；
          5.4的情形有没有觉得非常眼熟，当两个div，左侧浮动，右侧不浮动时，左侧div提升半个层级，右侧div与左侧div同行，但是右侧div内容却位于左侧div右侧。。
          6.所以，我不认为是before影响了高度

          头像
          augu
            82
            .clearfix:before,
.clearfix:after {
    /*--for other broswer--*/
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;/*--for IE--*/}
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题