【每天一个知识点】float浮动为什么会坍塌，坍塌的解决方式？

浮动坍塌的产生：
float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级元素，而不论它本身是何种元素。元素对象设置了float属性之后，它将不再独自占据一行。浮动块可以向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。
所以当设置浮动后，这个浮动的元素高度就脱离文档流不被计算了，下面的元素就会往上顶。

最好的办法就是加一个伪元素：
父级最后一个子级位置添加block块设置：clear：both；
父级选择器::after{
coontent:“”;
display:block;
clear:both;
}

拓展：关于float脱离文档流和absolute脱离文档流是一样的吗？
答：不一样
准确的说，float浮动属于半脱离文档流，1、float浮动跟position:absolute一样拥有脱离文档流的功能，但是float虽然脱离了文档流但是仍然会占据位置，其他的文本内容会按照顺序继续排列——如果你对所有的元素都设置了浮动，你会看到这几个div并不会重叠，而是会顺序排列。可以参考设置display:none,跟visible:hidden的效果。
> https://www.likecs.com/show-204169883.html