许少鹏 发表于 2018-11-12 16:22:49

BFC二问

本帖最后由 许少鹏 于 2018-11-12 16:23 编辑

操作系统:macOS 10.12.6
浏览器:Chrome 69.0.3497.100(正式版本)(64 位)


在《CSS世界》P160页,如下图,关于BFC,有这么一段话:

可是,当自己写demo在浏览器测试,发现有很多问题。
问题一:里面的人出不去,外面的人进不来?
.bfc {
    display: inline-block;
    width: 200px;
    height: 200px;
    border: solid 1px #ccc;               
}
.inner {
    width: 100px;
    height: 100px;
    background-color: #e00000;
}
.out {
    width: 100px;
    height: 100px;
    background-color: #ea6542;
}

<div class="bfc">
      <div class=inner></div>
</div>
<div class="out"></div>

对于上面的代码,在浏览器的效果如下图所示;

当给.inner {margin-left: 150px;},.out{margin-top: -50px;};在浏览器的效果如下图所示:

很显然,.inner从.bfc盒子里跑出来了,.out从外面进入到.bfc这个盒子里面了。
问题二:BFC 元素是不可能发生 margin 重叠的?
<div class="bfc"></div>
<div class="bfc"></div>

.bfc {
    width: 100px;
    height: 100px;
    border: solid 1px #ccc;
    overflow: hidden;
    margin: 50px auto;
}

对于上面的代码,在浏览器的效果如下图所示,两个.bfc之间的距离只有50px,显然发生了margin合并。

许少鹏 发表于 2018-11-12 16:58:02

补充:关于第二个问题,如果bfc的触发条件改成{display: inline-block;}则不会发生margin合并。
:Q:Q:Q心态崩了…………………………

hufei 发表于 2019-1-21 06:39:51

第二个问题:margin无重叠说的应该是BFC里面的子元素,而非BFC元素本身;BFC只是形成结界是针对里面的子元素说的

liu7q 发表于 2019-4-12 15:58:40

问题一呢?有没有解答下
页: [1]
查看完整版本: BFC二问