面试题：复杂页面布局中清除浮动的多种方法及优劣对比

Question

在一个包含多个浮动元素且结构复杂的页面布局中，列举至少三种清除浮动的方法，并详细分析每种方法的优点和缺点，以及在不同浏览器环境下的兼容性表现。

Answer 1

1. 额外标签法

• 方法：在浮动元素末尾添加一个空的块级元素，例如 <div style="clear:both;"></div>。
• 优点： 简单易懂，容易上手。
• 缺点：会增加无意义的 HTML 标签，使 HTML 结构变得复杂，不利于维护。
• 兼容性：兼容性好，支持所有主流浏览器。

2. 父元素 overflow 属性法

• 方法：给包含浮动元素的父元素设置 overflow: hidden 或 overflow: auto。
• 优点：不需要额外添加 HTML 标签，保持 HTML 结构简洁。
• 缺点：如果子元素超出父元素范围，使用 hidden 会隐藏溢出部分内容；auto 可能会出现滚动条影响布局美观。
• 兼容性：在 IE6 和 IE7 中，需要触发 hasLayout，可通过设置 zoom:1 解决，其他主流浏览器兼容性良好。

3. 伪元素清除法

• 方法：利用 CSS 伪元素在父元素内部创建一个看不见的块级元素并清除浮动。例如：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
  *zoom: 1; /* 针对 IE6、IE7 */
}

• 优点：既保持 HTML 结构简洁，又能达到清除浮动效果，代码相对简洁。
• 缺点：需要理解和掌握 CSS 伪元素的使用，对于初学者有一定难度。
• 兼容性：现代浏览器兼容性良好，在 IE6 和 IE7 中，需添加 *zoom:1 触发 hasLayout 来兼容。