给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值的解决办法

旧城等待， 2022-03-16 00:24 123阅读 0赞

bfc详细介绍参照[https://blog.csdn.net/AmberWu/article/details/79543896][https_blog.csdn.net_AmberWu_article_details_79543896]

本文介绍给子元素盒子增加垂直外边距margin-top时，会导致父元素盒子与子元素盒子边界重叠而导致父元素盒子也往下走

转载自[https://blog.csdn.net/oiu1010110/article/details/53192048][https_blog.csdn.net_oiu1010110_article_details_53192048]

我们div嵌套时会出现外边距重叠（bfc）问题

在设置son的margin-top想让son离father上部10px的时候发现，father与son一起下移10px

解决办法:

1、修改父元素的高度，也就是时设置父元素盒子的内边距，增加padding-top样式[模拟][Link 1]（padding-top：1px；常用）

2、为父元素添加边框线border（border:1px solid transparent可用）

3、为父元素添加溢出隐藏属性[overflow][]：hidden；样式即可（完美）

4、为父元素或者子元素声明浮动（float：left；可用）

5、为父元素或者子元素声明绝对定位（position:absolute;）

[https_blog.csdn.net_AmberWu_article_details_79543896]: https://blog.csdn.net/AmberWu/article/details/79543896
[https_blog.csdn.net_oiu1010110_article_details_53192048]: https://blog.csdn.net/oiu1010110/article/details/53192048
[Link 1]: https://www.baidu.com/s?wd=%E6%A8%A1%E6%8B%9F&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[overflow]: https://www.baidu.com/s?wd=overflow&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd