css 清除浮动

用伪元素消除浮动

.clearfix::after {
content: “.”;
clear: both;
display: block;
visibility: hidden;
}
::after是在元素的后面增加，::before 在元素的前面增加
也就是在父元素的后面增加一个看不见的元素，消除浮动带来的影响。

参考：https://blog.csdn.net/sunshine_yinger/article/details/83956158

出现了以下问题：

1.浮动元素排版超出了其父级元素（.topDiv），父元素的高度出现了塌缩，若没有文字高度的支撑，不考虑边框，父级元素高度会塌缩成零。

2.浮动元素甚至影响到了其父元素的兄弟元素（.bottomDiv）排版。因为浮动元素脱离了文档流，.bottomDiv在计算元素位置的时候会忽略其影响，紧接着上一个元素的位置继续排列。

解决问题的思路：

1.解决第一个问题，需要清除.otherDiv周围的浮动；

2.而解决第二个问题，因为父元素的兄弟元素位置只受父元素位置的影响，就需要一种方法将父级元素的高度撑起来，将浮动元素包裹在其中，避免浮动元素影响父元素外部的元素排列。