本教程操作系统：windows10系统、DELL G3电脑。
在CSS中，浮动（float）是一种常用的布局技术，可以使元素脱离正常的文档流，并沿着其容器的左侧或右侧浮动。然而，当浮动元素的高度不同或者浮动元素之间有重叠时，可能会导致布局混乱或出现意外的副作用。为了解决这些问题，我们可以使用不同的方式来清除浮动。下面我将介绍一些常用的css清除浮动的方式。
1. 使用clear属性：
clear属性是一种简单而常用的清除浮动的方法。通过在浮动元素的后面添加一个空的块级元素，并为其设置clear属性，可以清除前面的浮动影响，使其下方的元素正常布局。clear属性可以设置为left、right、both或none，分别表示清除左浮动、右浮动、同时清除左右浮动或不清除浮动。
立即学习“前端免费学习笔记（深入）”；
示例代码：
.clearfix::after { content: ""; display: block; clear: both; }示例HTML代码：
<p class="clearfix"> <p class="float-left">左浮动元素</p> <p class="float-right">右浮动元素</p> </p>
2. 使用overflow属性：
overflow属性是另一种常用的清除浮动的方法。通过在浮动元素的容器上设置overflow属性为auto或hidden，可以触发BFC（块级格式上下文），从而清除浮动影响。这是因为BFC会包含浮动元素，并将其高度计算在内，使得容器可以正常布局。
示例代码：
.clearfix { overflow: hidden; }示例HTML代码：
<p class="clearfix"> <p class="float-left">左浮动元素</p> <p class="float-right">右浮动元素</p> </p>
3. 使用clearfix类：
clearfix类是一种常用的清除浮动的类名，可以通过在浮动元素的容器上添加clearfix类，来清除浮动影响。这种方式通常使用伪类::after来添加一个空的块级元素，并为其设置clear属性。
示例代码：
.clearfix::after { content: ""; display: block; clear: both; } .clearfix { zoom: 1; }示例HTML代码：
<p class="clearfix"> <p class="float-left">左浮动元素</p> <p class="float-right">右浮动元素</p> </p>
4. 使用父元素的clearfix类：
在某些情况下，我们可以直接在浮动元素的父元素上添加clearfix类，来清除浮动影响。这种方式与上述的clearfix类方法类似，但是将clearfix类添加在父元素上，可以更方便地清除所有子元素的浮动效果。
示例代码：
.parent-element::after { content: ""; display: block; clear: both; }示例HTML代码：
<p class="parent-element clearfix"> <p class="float-left">左浮动元素</p> <p class="float-right">右浮动元素</p> </p>
5. 使用伪元素清除浮动：
除了使用伪类::after之外，我们还可以使用伪元素::before来清除浮动。通过在浮动元素的容器上添加一个空的块级元素，并为其设置content属性为空字符串，可以触发BFC，从而清除浮动影响。
示例代码：
.clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } .clearfix { zoom: 1; }示例HTML代码：
<p class="clearfix"> <p class="float-left">左浮动元素</p> <p class="float-right">右浮动元素</p> </p>
6. 使用父元素的overflow属性：
除了在浮动元素的容器上设置overflow属性之外，我们还可以在其父元素上设置overflow属性，来清除浮动影响。这种方式与上述的overflow属性方法类似，但是将overflow属性设置在父元素上，可以更方便地清除所有子元素的浮动效果。
示例代码：
.parent-element { overflow: hidden; }示例HTML代码：
<p class="parent-element"> <p class="float-left">左浮动元素</p> <p class="float-right">右浮动元素</p> </p>
7. 使用clear属性和BFC：
在某些情况下，我们可以通过将clear属性与BFC相结合的方式来清除浮动。通过在浮动元素的后面添加一个空的块级元素，并为其设置clear属性，再为浮动元素的容器设置overflow属性为auto或hidden，可以同时使用这两种方式来清除浮动影响。
示例代码：
.clearfix::after { content: ""; display: block; clear: both; } .clearfix { overflow: hidden; }示例HTML代码：
<p class="clearfix"> <p class="float-left">左浮动元素</p> <p class="float-right">右浮动元素</p> </p>
综上所述，CSS清除浮动的方式包括使用clear属性、overflow属性、clearfix类、父元素的clearfix类、伪元素清除浮动、父元素的overflow属性以及clear属性和BFC相结合等方法。在实际开发中，我们可以根据具体的需求和布局情况选择合适的方式来清除浮动，以确保页面的布局正确和符合预期。