抛一块问题砖（display： block）先看现象：在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。引用W3C的例子，news容器没有包围浮动的元素。
CSS Code复制内容到剪贴板
.news {
background-color: gray;
border: solid 1px b
在网页设计中，CSS浮动（float）是一种常见的布局技术，常用于实现元素的左右排列，如图文混排。然而，浮动元素可能导致一个名为“浮动溢出”的问题，即当容器内的浮动元素高度超过容器自身时，容器无法自动适应内容的高度，从而导致内容溢出容器边界，影响整体布局。为了解决这个问题，我们需要进行CSS清除浮动。
我们来看一个例子，假设有一个`.news`的容器，包含两个浮动元素：一个图片（`.news img`）和一段文字（`.news p`）。在非IE浏览器中，`.news`容器的高度不会随着浮动元素自动增长，内容会溢出容器，表现为灰色背景无法完全覆盖图片和文字。这是因为浮动元素已经脱离了常规文档流，不再影响它们的父元素的高度计算。
解决浮动溢出问题，有多种清除浮动的方法：
1. 使用`<br>`标签：在所有浮动元素之后添加一个`<br>`标签，`<br>`标签具有天然的清除浮动属性，能够迫使容器高度扩展。但这并不是最佳实践，因为它引入了额外的HTML标记。
```html
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<br />
</div>
```
2. 添加清除浮动层：在浮动元素之后添加一个带有`clear:both`样式的空`div`。这种方法保持HTML结构清晰，但仍然需要额外的元素。
```html
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div style="clear:both;"></div>
</div>
```
3. 设置`overflow:auto`：给浮动元素的父容器添加`overflow:auto`样式，这将创建一个新的块格式化上下文，使容器能包含其内部的浮动元素。但需要注意，这可能会导致滚动条的出现。
```css
.news {
overflow: auto;
background-color: gray;
border: solid 1px black;
}
```
4. 使用`:after`伪元素：这是一种更现代的解决方案，适用于支持CSS2.1及以上版本的浏览器。通过在浮动元素后面添加一个`content:""`的`:after`伪元素，并设置`clear:both`，可以清理浮动。同时，为了使IE6和7也生效，可以使用`zoom:1`触发hasLayout。
```css
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
```
5. 更简洁的`:before`和`:after`伪元素方法：这种方法使用`display: table`和`:before`伪元素，同样创建新的块格式化上下文，并清理浮动。
```css
.cf:before, .cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
.cf {
zoom: 1;
}
```
以上就是清除浮动的一些常用方法。选择哪种方法取决于兼容性需求、代码可维护性和是否希望避免额外HTML标记等因素。在实际项目中，通常推荐使用`:after`伪元素方法，因为它既保持了HTML结构的简洁，又具备良好的浏览器兼容性。
