某外企面试题，你真的了解BFC吗？

开发运维 2023-10-16 大猫 手机阅读

  • 问题：子元素设置 margin-top,会超出父元素的范围，变成父元素的 margin-top。而实际上子元素和父元素之间，依然没有margin-top的效果不是我们想要的。
    解决方法：

  • 设置新外层元素 overflow:hidden变成一个BFC方式的渲染区域。

    • 结果:
    子元素的margin-top受到外层父元素BFC渲染区域的阻隔，不会影响父元素以外的区域。子元素的margin-top，才真正成为子元素与父元素上边的间距。

    其他方案：
    1.为父元素添加上边框，颜色设置为透明。
    2.用父元素的padding-top代替第一个子元素的margin-top。
    3.在父元素内第一个子元素之前添加一个

    ，用平级BFC渲染区域阻隔下方元素的margin-top。
    4. 父元素::before{content:"";display:table}，用平级BFC渲染区域阻隔下方元素的margin-top。