HTML为什么要清除浮动？
在网页设计中，浮动是常用的布局技术。通过浮动元素，可以让多个元素在一个容器中并排显示。但是，浮动会带来一些问题，这就需要用到清除浮动的技术了。
什么是浮动？
浮动（float）是 CSS 中用于布局的一种方式。通过设置一个元素的浮动属性，可以将该元素脱离文档流，并向左或向右移动，直到遇到容器边界或其他浮动元素。浮动元素会使得其他元素围绕它而不是覆盖它。例如，可以用浮动将两个元素放在同一行。
浮动带来的问题
当浮动元素的高度超过其他元素时，容器的高度将不会自动调整。这会导致其他元素的位置错乱，甚至重叠在一起。这种现象被称为高度塌陷。
例如，现在需要在一个容器中放置三个块级元素，分别为两个图片和一个段落。我们可以通过浮动图片让它们在一行内并排显示。
HTML代码：
<div class="container"><img src="image1.jpg" class="float-left">
<img src="image2.jpg" class="float-left">
<p>这是一段文本</p>
</div>
CSS样式：
.float-left {float: left;
}
但是，如果图片的高度超过了段落的高度，那么段落的下方就会出现空白。这时候，就需要清除浮动了。
清除浮动的方法
清除浮动的方法有很多种，下面分别介绍一下常用的几种方法。
1.使用空元素清除浮动
这是一种比较老的方法，通过在容器的末尾添加一个空元素，并清除其浮动，可以让容器自适应高度。这种方法的缺点是会增加无意义的 HTML 代码。
HTML代码：
<div class="container"><img src="image1.jpg" class="float-left">
<img src="image2.jpg" class="float-left">
<p>这是一段文本</p>
<div style="clear: both;"></div>
</div>
2.使用overflow属性清除浮动
通过设置容器的overflow属性为auto或hidden，可以让容器自适应包含浮动元素的高度。这种方法的缺点是会隐藏容器中溢出的内容。
CSS样式：
.container {overflow: hidden;
}
3.使用clearfix类清除浮动
clearfix是一种比较流行的清除浮动的方法。通过在容器中添加一个clearfix类，并设置其样式，可以让容器自适应高度。
HTML代码：
<div class="container clearfix"><img src="image1.jpg" class="float-left">
<img src="image2.jpg" class="float-left">
<p>这是一段文本</p>
</div>
CSS样式：
.clearfix::after {content: "";
display: block;
clear: both;
}
浮动是一种常用的布局技术，但也会产生高度塌陷等问题，这就需要用到清除浮动的技术了。常用的清除浮动的方法有使用空元素、使用overflow属性和使用clearfix类。掌握清除浮动的方法可以让我们在网页设计中更加灵活和高效。
