CSS 清除浮动
在元素设置浮动（float）后，该元素就会脱离文档流，并且向左或向右浮动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。
一、浮动元素对布局的影响
1.1、浮动元素造成父元素的高度塌陷：
原来的父元素高度是内部元素撑开的，但是当内部元素浮动后，脱离文档流浮动起来，那父元素的高度就坍塌，变为高度 0px。
<style>
.container {
border: 1px solid blue;
}
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: red;
float: left;
}
</style>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>上述代码中 container 元素的高度将会是 0px。
1.2、浮动元素对邻近非浮动元素造成影响：
<style>
.container {
border: 1px solid blue;
}
.box0 {
width: 100px;
height: 100px;
margin: 10px;
background-color: red;
float: left;
}
.box1 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
<div class="container">
<div class="box0"></div>
<div class="box0"></div>
<div class="box0"></div>
<div class="box1"></div>
</div> 上述代码中 box1 的位置受到前面元素浮动的影响，而且不管 box1 是在 container 里面还是外面都会受到影响。
二、清除浮动（解决浮动元素影响邻近非浮动元素问题）
CSS 清除浮动是指在使用浮动布局时，解决浮动元素对非浮动元素的影响的问题。
当元素设置为浮动时，它会从文档流中“漂浮”出来，不再占据原来的空间，导致后面的元素不能正确地换行显示。为了解决这个问题，需要使用清除浮动的方法。
常见的清除浮动方法有以下几种：
1、在浮动元素后添加一个空的容器，并给该容器设置 clear 属性：
<div style="position: relative;">
<div style="float: left;">...</div>
<div style="float: left;">...</div>
<div style="clear: both;"></div>
</div>2、给父元素设置 overflow 属性：
<div style="overflow: hidden;">...</div>3、使用伪元素：
.clearfix::after {
content: "";
display: table;
clear: both;
}将以上代码添加到需要清除浮动的元素的 CSS 中，并在 HTML 中将该元素的 class 设置为 clearfix。这样，就可以通过使用伪元素清除浮动了。
4、使用 CSS flex 布局：
在使用 CSS flex 布局时，父元素默认会包含所有的子元素，因此不需要进行清除浮动。
<div style="display: flex;">
<div style="float: left;">...</div>
<div style="float: left;">...</div>
</div>5、使用 CSS grid 布局：
在使用 CSS grid 布局时，父元素默认会包含所有的子元素，因此不需要进行清除浮动。
<div style="display: grid;">
<div style="float: left;">...</div>
<div style="float: left;">...</div>
</div>上是 CSS 清除浮动的常见方法，需要根据具体的使用场景和需求来选择最适合的方法。
三、解决浮动元素造成父元素高度塌陷问题
在开发过程中，有时需要解决浮动元素对父元素高度的影响，这时也可以使用以下方法解决：
1、使用绝对定位：
通过将浮动元素设置为绝对定位，可以避免浮动元素对父元素高度的影响。
<div style="position: relative;">
<div style="position: absolute;">...</div>
<div style="position: absolute;">...</div>
</div>2、使用 table 布局：
通过将父元素设置为表格布局，可以避免浮动元素对父元素高度的影响。
<div style="display: table;">
<div style="display: table-cell;">...</div>
<div style="display: table-cell;">...</div>
</div>这些方法可以帮助解决浮动元素对父元素高度的影响问题，但是需要根据具体的使用场景和需求来选择最适合的方法。