css清除浮动、css边界塌陷原理

蚌埠住了，大半夜自学，不是很懂为什么overflow：hidden会让盒模型出现，删了后就整个“”消失“”了。在这之前我只知道overflow有隐藏子元素对父元素的溢出的功能。

自学到现在，这可能是我遇到最难理解的一次了，所以我整理在这里，防止以后又忘了还得再四处查四处云里雾里。

关于清除浮动的部分：CSS 深入理解：overflow: hidden——隐藏溢出、清除浮动、解除坍塌 - SegmentFault 思否

看这个博客的清除浮动那部分。

关于边界塌陷的原理，css盒模型 - 掘金 (juejin.cn)

看这个博客的外边距折叠那部分。

关于父子层级的塌陷（折叠）：当正常流父盒子只有块级子元素时默认高度是最高子元素的上边框到最低子元素下边框的距离，而最高/最低子元素的外边距会折叠成父盒子的外边距（可以当作最高和最低子元素的外边距会变成父盒子的外边距），而当父盒子设置了边框或者内边距，那就没有了坍塌（折叠），就会变成我们常识理解的父盒子默认高度为最高子元素的上外边距到最低子元素的下外边距，子元素的外边距会正常的以父盒子的边框或内边距为坐标来生效，而不是成为父盒子的外边距。

//主要是从别人的博客总结的东西， 没啥自己的东西，我写在这就是方便自己理解，怕以后自己忘了还得重新四处拼凑理解