如何清除浮动

1. 额外标签法：

方法：在最后一个浮动元素之后添加一个空的标签（如<div>、<br>、<hr>等），并给这个标签设置 clear: both; 属性。
优点：简单、易理解、书写方便。
缺点：需要添加额外的HTML元素，可能会增加文档的结构复杂性，且这些元素往往没有实际的语义价值。

2. 父级添加overflow属性：

方法：给浮动元素的父元素设置 overflow: hidden; 或 overflow: auto; 属性。
原理：通过触发BFC（块级格式化上下文）来清除浮动。
优点：代码简洁。
缺点：如果内容增多，可能会造成内容被隐藏，无法显示溢出的元素。此外，这种方法可能会与position属性产生冲突。

3. 使用after伪元素：

方法：在浮动元素的父元素上使用:after伪元素，并设置

content:" ";
display: block;
clear: both; 

优点：符合闭合浮动思想，结构语义化正确，不需要额外添加HTML元素。
缺点：IE6/7不支持:after伪元素。

4. 使用before和after双伪元素：

方法：与单伪元素方法类似，但在父元素上同时使用:before和:after伪元素，并设置 content: " "; display: table; 以及:after伪元素的 clear: both; 属性。
优点：代码更简洁，且能更好地兼容一些特殊情况。
缺点：需要针对IE6/7进行hack处理。

5. 父级设置固定高度：

方法：直接给浮动元素的父元素设置一个固定的高度。
优点：简单、直接。
缺点：只适用于高度固定的布局场景，如果内容高度变化，则需要重新调整父元素的高度。