老师，请问下为什么新代码多了 display：inlineblock,和width： 100%

Question

我试了 没有这两行，icon-close 是不会固定在下面的，但是为什么 旧版本的写这个代码OK？

Answer 1

weixin_慕妹0008060 2020-04-02 22:43:16

因为，子DIV块中设置margin-top会引发外边距合并问题，从而导致父div会向下移动margin-top的距离。

设置display:inline-block会触发bfc，从而规避了外边距（父子类型外边距合并）问题，其实也可以设置为overflow:hidden。

参考视频：https://www.bilibili.com/video/BV1j7411g7SK?p=92

• 小源子666 #1

  在老版本的代码中，我去掉clearfix也没问题呀
  detail-main有margin-top且没有设置上内边距或上边框，所以会和紧挨着的子元素发生外边距合并，但detail-main的第一个子元素是.name，把detail-main和设置了margin-top的star-wrapper隔开了，就不会发生外边距合并了啊

Answer 2

心滕thy 2019-10-31 11:03:33

旧版本加了一个.clearfix 这个class里写了display:inline-block 

Answer 3

ustbhuangyi 2019-07-04 15:11:56

如果不设置 inline-block，那么这个层就把 close 图标顶到下面了。

• 提问者 千修罗 #1

  是不是这个原因？：子DIV块中设置margin-top时影响父DIV块位置问题