清除浮动的方式以及各自的优劣

Posted 2020-09-20 Angelina

为什么要清除浮动
浮动会使当前标签产生向上浮的效果，导致不同浏览器在计算父级元素高度，或者显示前后标签位置的时候产生意想不到的问题。

---

清除浮动的方法

1. 为父元素定义height
2. 设置父元素浮动，同时为其设置高度
3. 在浮动元素的后面添加一个空的div标签，并为新添加的标签设置clear：both
4. 在浮动元素的后面添加一个空的br标签，并为新添加的标签设置clear：both
5. 为父元素设置overflow：hidden
6. 为父元素设置overflow：auto
7. 为父元素设置display：table
8. 为父元素设置zoom属性，并为其添加一个伪类：after，同时设置伪类clear：both

---

每种方法的分析

1. 为父元素设置高度，至少可以保证父元素级别的内容可以正常显示，但是有两个问题：
   ①父元素固定高度，而内部子元素的高度可能是动态的，这样会导致出现滚动条
   ②浮动元素的兄弟元素位置的显示可能还是不正常。
2. 为父元素设置高度，原理与上面的类似，只是在第一个的基础上添加了浮动
3. 为浮动元素后面添加空的div，然后设置空div清除浮动，会导致代码冗余，当页面浮动元素较多时，html代码中会有很多空div，显得很low。
4. 与第三个相似，只是div标签换为了br标签。
5. 为父元素设置zoom属性，同时设置overflow：hidden，会导致当子元素的内容为动态的时候，内容可能会被隐藏，且不能配合position：relative仪器使用。
6. 与overflow：hidden相比，overflow：hidden的问题是可能会出现滚动条。
7. 为父元素设置display：table，个人感觉会出现未知的问题。
8. 为父元素设置zoom属性，并配合伪类一起使用时，浏览兼容性好，但问题是必须两个配合使用。

---

推荐方法
推荐使用第八种方法，原因：

• 代码简单，无冗余HTML代码
• 兼容性好，大部分浏览器都支持。