问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

【读CSS规范】术语collapse through如何理解？

头像
隐秘通途
    9411128

    开始简单的理解为等同于display:none的效果，后来发现是错的，被collapse through的盒对后面的盒依然有影响。
    有人能深入的解释下么？

    css
    阅读 3.4k
    2 个回答
    得票最新
    头像
    zonxin
      12.1k2632

      据规范对collapse through的定义，collapse through对元素的影响是对其border top边界位置的影响。而border top仅仅会影响其子元素的位置。也就是说，被collapse through的仅仅会影响其后代元素的位置，而不会影响其他元素的位置。

      如果一个元素被collapse through，那么他的 border top位置分为两种情况：

      1. 如果这个元素的margin和其父元素的marin-top合并，则其border top边界和其父元素的border top相同。

      2. 否则，其border top的位置如同其下边界宽度不为0那样的计算，当然，只是如同而已。

      举个例子：

      <!doctype html>
<html>
    <head><style> 
        div {margin:50px;}
        .float {width:100px;height:100px;float:left; margin:0 100px;}
        .yellow {background:yellow;}
        .red {background:red;}
        .green {background:green;}
        .blue {background:blue;}
    </style></head>
    <body>
        <!-- ex1 -->
        <div class="red" style="height:150px;margin-top:100px;">         
             <div id="ex1"><div class="float yellow"></div></div>
        </div>
        <!-- ex2 -->
        <div class="red" style="height:300px">
            <div class="green" style="height:100px">
            </div>        
             <!--<div id="ex2"  style="border-bottom:solid 1px" -->
             <div id="ex2">
                <div class="float" style="background:purple;"></div>
             </div>
             <div class="blue" style="height:100px;margin:100px 50px"></div>
        </div>
    </body>
</html>

      图片描述

      比如 ex1 里面，div#ex1里面的浮动元素脱离流，则这个元素为空，则需要被collapse through，他的margin应该和父元素的margin-top合并，所以这个元素的 border top 和父元素.red相同，而.yellow的浮动的位置是按照其这个元素计算的，于是可以看出div#ex1的border top的位置和red相同。

      在ex2里面，div#ex2,他的 border top 位置就是像他的border-bottom不为0时候的位置。如果他的border-bottom不为0，则.green和.blue不应该合并，他应该在他们之间，div#ex2的margin-top和green的margin-bottom合并之后，是50px,即其border-top的位置就是.geen背景以下50px。故purple的位置如图所示。 当然这并不影响其他的布局的计算，只是计算这个元素border top 时候的 as if 而已。可以换成注释的代码试试。

      P.S. 其实div#ex2可以去掉，因为当浮动元素出现在两个合并的margin之间的时候，就如果它有一个匿名的空的父元素。

      头像
      残阳映枫红
        6.1k11115

        对于被 collapse through 的元素需要关心两件事:

        1. 内部元素定位: 为了定位该元素的内部元素(如果有的话), 需要明确此元素的外边缘.

        2. 外边距折叠: 该元素自身外边距的合并情况以及与其他相邻外边距的合并情况. 这时会影响元素相互的外部关系(实际外边距距离), 而不会影响到其他元素自家如何去定位.

        这两件事情里面, 可能题主疑惑的就是第二点, 明明改变了后面的元素和别的元素的距离, 怎么又说没有影响呢? 我认为规范所描述的没有影响, 是指排除了外边距折叠所造成的相互距离改变之外, 没有别的任何影响.

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        被 1 篇内容引用
        推荐问题
        宣传栏