[问题]BFC的问题

1.我在chrome看的body没有下移。。。 2.我觉得是子元素设置inline-block成了新的BFC？ 3.body是默认创建BFC的 对BFC的规则也有点迷惑，求讨论~~

。。。 我在谷歌看到的body的确是下移。。。（Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠，父元素的margin-top与第一个块级元素的margin-top发生重叠。所以我觉得是合理的） 然后inline-block不是line level吗。。。 最后一个是对的吧。。。 我也是小白 共勉吧。。。 【 在 leafx 的大作中提到: 】 : 1.我在chrome看的body没有下移。。。 : 2.我觉得是子元素设置inline-block成了新的BFC？ : 3.body是默认创建BFC的 : ...................

哦哦~我错啦，lz那样写body是下移的，如果把margin的那个元素写成inline-block就不下移啦，inline-block是生成BFC的，所以应该是margin的元素生成BFC才能取消上下边距叠加 【 在 bmjwanm 的大作中提到: 】 : 。。。 : 我在谷歌看到的body的确是下移。。。（Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠，父元素的margin-top与第一个块级元素的margin-top发生重叠。所以我觉得是合理的） : 然后inline-block不是line level吗。。。 : ...................

我把最外层称呼为ａ，里头的为ｂ，ｃ。事实上觉得所谓的ＢＦＣ布局规则把事情说复杂了。 第一个例子中，ｂ属于该ｂｆｃ，ｃ不是，ｃ会生成一个匿名的block box（显然，标准不允许出现不同的ｆｏｒｍａｔｉｎｇ ｃｏｎｔｅｘｔ），所以，显然两个ｂｌｏｃｋ ｌｅｖｅｌ的 第二个例子中，标准里头说 ｌｉｎｅ ｂｏｘ的计算是根据所有ｉｎｌｉｎｅ－ｌｅｖｅｌｂｏｘ的最大高度来算，如果是ｉｎｌｉｎｅ-block就计算ｍａｒｇｉｎ ｂｏｘ，如果是ｉｎｌｉｎｅ ｂｏｘ就靠line-height来计算。要求保证ｌｉｎｅ ｂｏｘ高度包含所有ｉｎｌｉｎｅ－ｌｅｖｅｌ ｂｏｘ.所以，高度就高了。另外，ｂａｓｅｌｉｎｅ对齐是要对齐被包含元素和包含元素的ｂａｓｅｌｉｎｅ，而ｉｎｌｉｎｅ－ｂｌｏｃｋ ｂｏｘ没有ｂａｓｅｌｉｎｅ，只好对齐下ｍａｒｇｉｎ边界。 你看我的例子，推荐ｌｚ也用ｃｏｄｅｐｅｎ来分享讨论问题 http://codepen.io/reverland/pen/JKOZNA

如果对ｃｓｓ感兴趣，推荐看看 http://book.mixu.net/css/single-page.html 我觉得，这本书能打下很好的基础让你理解到底ｃｓｓ后的布局策略，以至于更好的理解一些ｔｒｉｃｋ。 然后日常使用，也不大会关心这些问题，但有个印象知道去看标准总是好的。 最后，各位看客，没啥兴趣建议别看这些没用的了......哪里搬砖都不需要知道这么多，什么都不知道照搬不误。不说了，我去搬砖了