在网页设计中，浮动元素的使用常常导致包含它们的父元素无法自动适应高度，这个问题被称为“浮动溢出”。为了解决这一问题，通常有两种主要的方法：一是利用`zoom`属性和`:after`伪类，二是使用`overflow`属性。下面分别详细介绍这两种方法。
**第一种方法：使用`zoom`和`:after`伪类**
这种方法主要针对于Internet Explorer（IE）和其他非IE浏览器的兼容性处理。在IE中，我们可以利用`zoom:1`属性来触发hasLayout机制，使元素自动扩展以包含浮动的子元素。对于非IE浏览器，我们需要使用CSS的`:after`伪类来清除浮动。
```css
ul {
margin: 0;
padding: 10px;
list-style: none;
background-color: #006699;
zoom: 1; /* IE */
}
ul:after {
content: ".";
display: block;
clear: both;
height: 0;
font-size: 0;
line-height: 0;
}
```
在非IE浏览器中，`:after`伪类会在`ul`元素后面添加一个不可见的块级元素，通过`clear:both`清除浮动，使得`ul`能够包裹住所有的浮动子元素。但此时可能会出现一个小黑点，通过`font-size:0;line-height:0;`来消除这个视觉上的小瑕疵。
**第二种方法：使用`overflow`属性**
这种方法适用于大部分现代浏览器，包括IE7及更高版本，Firefox，Opera，Safari等。只需在父元素上设置`overflow:auto`，就可以自动扩展高度以包含浮动子元素。但对于IE6和IE5，需要额外的处理。为这些旧版IE浏览器设定一个固定的高度，哪怕高度是0，也能触发父元素的自动伸长。
```css
/* 对于支持属性选择符的浏览器（A阵营） */
[xmlns] ul {
/* html[xmlns] ul 的简写 */
overflow: auto;
}
/* 对于不支持属性选择符的浏览器（B阵营，主要是IE6和IE5） */
* html ul {
height: 1%; /* 或者0，只要设置了高度即可 */
}
```
在这里，`* html`是IE6和IE5特有的选择器，用来覆盖前面的`[xmlns] ul`规则。而`html[xmlns]`则是为了确保在现代浏览器中不会应用这个样式，因为它需要`<!DOCTYPE>`声明和`<html xmlns="...">`属性。
这两种方法都是为了解决浮动元素对父元素高度的影响，以保持页面布局的正常显示。在实际应用中，开发者可以根据项目需求和浏览器兼容性选择合适的方法。
