个方法不单使用简单，而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。ul{ list-style:none; height:auto; margin:0;p adding:0; background-color:#436973; } li{
在网页制作中，浮动元素（如`<li>`标签）经常被用来实现布局效果，例如创建多列列表或实现响应式设计。然而，浮动元素的一个常见问题是它可能导致其父元素失去高度，即所谓的“浮动塌陷”。为了解决这个问题，我们可以使用CSS的`overflow`属性来清除浮动，而无需依赖传统的`clear:both`方法。
`overflow`属性在CSS中主要用于控制内容溢出元素边界时的行为。当设置为`overflow:auto`或`overflow:hidden`时，`overflow`属性可以帮助我们清除浮动。这种方法的优点是它在Firefox (FF)，Opera (OP) 和 Internet Explorer 7 (IE7) 及以上版本中都得到良好支持，提供了更好的浏览器兼容性。
在上述示例中，我们可以看到一个包含多个浮动`<li>`元素的`<ul>`列表。`ul`和`li`元素的样式分别定义如下：
```css
ul {
list-style: none;
height: auto;
margin: 0;
padding: 0;
background-color: #436973;
}
li {
float: left;
width: 80px;
height: 80px;
background-color: #83B1DF;
}
```
为了清除浮动，我们为`<ul>`元素添加一个额外的类，如`.overflow`，并应用`overflow:auto`和`zoom:1`属性：
```css
.overflow {
overflow: auto;
zoom: 1;
background-color: #43FF73;
}
```
`overflow:auto`告诉浏览器，如果内容超出了元素的边界，应该显示滚动条（如果需要）。在某些情况下，只需要`overflow:hidden`也可以达到清除浮动的效果，但会隐藏任何溢出的内容。在这里，由于我们不需要显示滚动条，只需确保父元素包裹住浮动的子元素，所以`overflow:hidden`也是可行的。
对于Internet Explorer 6（IE6）的兼容性问题，我们需要使用私有属性`_height`来设定固定高度，因为IE6不支持`min-height`。同时，为了保持其他浏览器的`overflow:auto`效果，我们还需要定义`_overflow:visible`：
```css
.overflow {
overflow: auto;
_height: 200px; /* IE6 及以下版本 */
min-height: 200px; /* 对于IE7、FF、OP */
overflow: auto; /* 重写，防止IE6下面的可见性覆盖 */
zoom: 1;
_overflow: visible; /* IE6 及以下版本 */
}
```
通过这种方式，我们可以在不同浏览器上实现一致的清除浮动效果，同时保持代码简洁。需要注意的是，虽然`overflow`方法是一种有效的清除浮动方式，但在某些场景下，如需要保留内容溢出时，可能需要结合其他方法，如使用`clearfix`类或创建伪元素（如`:before`和`:after`）来清除浮动。在实际应用中，选择最合适的清除浮动方法应根据项目需求和浏览器兼容性来决定。
