七点爱学CSS 浮动（float）是网页布局中常用的一个属性，它可以让元素脱离正常的文档流，向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边框为止。然而，浮动元素也会带来一些问题，最常见的就是父元素高度塌陷。要解决这个问题，就需要“清除浮动”。
总的来说，清除浮动主要有以下几种方法：
- 使用空的
<div>元素并设置clear属性。 - 使用 CSS 的
:after伪元素。 - 父元素设置
overflow属性。 - 父元素也设置浮动。
- 使用
display:flow-root
接下来，我们将详细探讨每一种方法，分析它们的原理、优缺点以及适用场景。
1. 使用空的 <div> 元素并设置 clear 属性
这是最早期、最传统的一种清除浮动的方法。其原理非常简单：在浮动元素的后面添加一个空的 <div> 元素，并为这个 <div> 元素设置 clear 属性。clear 属性有四个值：left、right、both 和 none。
clear: left;表示清除左侧浮动。clear: right;表示清除右侧浮动。clear: both;表示同时清除左右两侧的浮动。clear:none：允许两边都可以有浮动对象
通常情况下，我们会使用 clear: both; 来确保完全清除浮动。
示例代码：
“`html
“`
优点： 简单易懂，兼容性好。
缺点： 增加了额外的 HTML 元素，使 HTML 结构不够简洁，语义化较差。在大型项目中，如果大量使用这种方法，会导致页面中充斥着大量无意义的空 <div>，影响代码的可读性和维护性。
2. 使用 CSS 的 :after 伪元素
这是一种更现代、更推荐的清除浮动的方法。它利用 CSS 的 :after 伪元素在浮动元素的后面创建一个虚拟的元素，并对这个虚拟元素应用 clear: both;。
示例代码：
css
.clearfix::after {
content: "";
display: block;
clear: both;
height:0;
visibility:hidden;
}
/ 为了兼容IE6/7 /
.clearfix{
zoom:1;
}
将 .clearfix 类添加到浮动元素的父元素上即可清除浮动。
原理详解：
content: "";：设置伪元素的内容为空。display: block;：将伪元素设置为块级元素。因为只有块级元素才能清除浮动。clear: both;：清除左右两侧的浮动。height:0;和visibility:hidden;：确保这个伪元素在页面中不可见，且不占据空间。zoom:1是 IE 6/7 的专属属性，用来触发 hasLayout，使其具有类似于BFC的特性。
优点： 不需要添加额外的 HTML 元素，代码更简洁，语义化更好。兼容性也很好。
缺点： 需要记住这段代码，对于初学者来说可能稍微有些复杂。
3. 父元素设置 overflow 属性
这种方法通过给浮动元素的父元素设置 overflow 属性（overflow: hidden; 或 overflow: auto;）来清除浮动。
示例代码：
“`html
“`
原理： 设置 overflow 属性（除了 visible 值之外）会触发 BFC (Block Formatting Context，块级格式化上下文)。BFC 是一个独立的渲染区域，它有自己的一套渲染规则，其中一条规则就是：计算 BFC 的高度时，浮动元素也参与计算。因此，父元素在计算高度时会把浮动元素的高度也算进去，从而避免了高度塌陷的问题。
优点： 代码简洁，不需要添加额外的 HTML 元素。
缺点：
- 如果父元素内有定位元素（
position: absolute;或position: relative;），并且这个定位元素超出了父元素的范围，那么超出部分会被裁剪掉（overflow: hidden;）或出现滚动条（overflow: auto;）。 - 在某些旧版本的浏览器中可能存在兼容性问题。
4. 父元素也设置浮动
这种方法是将浮动元素的父元素也设置为浮动。
示例代码：
“`html
“`
原理： 浮动元素会脱离正常的文档流，但它仍然会影响其他浮动元素。当父元素也设置为浮动时，它会包裹住所有的浮动子元素，从而避免了高度塌陷。
优点： 简单。
缺点：
- 会改变父元素的布局，可能需要对后续的布局进行调整。
- 可能导致更复杂的浮动问题，不推荐使用。
5. 使用display:flow-root
给父元素设置display:flow-root属性。
示例代码
“`html
``
原理：display: flow-root` 的作用是创建一个新的 BFC（块格式化上下文）。
优点：
代码简洁。
语义化好。
没有上面overflow属性带来的副作用。
缺点：
兼容性相对于::after伪元素差一些，不过主流的现代浏览器都是支持的。
总结
在实际开发中，:after 伪元素清除浮动和display:flow-root是目前最常用的两种方法，因为它们既简洁又高效，而且副作用较小。overflow属性清除浮动可以在某些特定情况下使用，但需要注意其可能带来的副作用。至于空 <div> 元素清除浮动和父元素也设置浮动这两种方法，由于存在明显的缺点，通常不推荐使用。选择哪种方法取决于具体的场景和需求，但无论选择哪种方法，理解其背后的原理都是至关重要的。