人生三大乐事：吃饭，睡觉，清浮动

今天早上忙完了，下午没事就写个文章，很想系统的写一个系列的文章，但我发现并不容易，只有想到什么就写什么了。

我的博客地址 http://blog.zhouminghang.xyz

---

之前面试的时候，经常被问到关于清除浮动的方法，下面就是我总结的几种常用的方法：

方法一：

使用一个空标签，来清除浮动；

注意：

• 这个clear-box，必须写在所有浮动元素的最后一个浮动元素后面，否则无效；
• 原理： 设置css属性clear: both;

弊端：

就是添加了一个没有语意的空标签；

---

方法二：

使用 overflow

给包含浮动元素的父标签上添加css属性over-flow: auto; zoom: 1;

注意：

• 给包含浮动元素的父元素添加属性；
• zoom: 1; 用于兼容低版本的IE浏览器，这里指IE6；

---

方法三：

使用after伪类对象来清除浮动；

但它目前只适用于非IE浏览器；

特别要注意的是：

• 该方法必须为需要清除浮动的元素的伪对象设置高度为零，即height: 0;,不然的话，该元素会比实际高出几个像素值；
• 必须给这个伪对象，设置content属性，值为“.”或者为空“”

---

方法四：

最不可取的方法，就是浮动外部元素，敌动我动，敌不动我不动，就这个战术；

这里不推荐使用这种做法，也就不细说了；

---

方法五：

这是我刚开始经常布局时候用的，我发现我使用浮动从来没遇见过其他人碰到的问题，这大概就是因为我设了高度吧；

给包含浮动元素的父元素，也就是给那个容器设置一个高度，这样所有浮动的元素智能在它的父元素内进行浮动；

需要注意的是：

• 设置的高度，必须大于等于浮动元素的高度；

---

相比较之下，方法2和方法3更好，而Bootstrap中清楚浮动的原理使用的就是方法3；

我该开始最常用的就是方法1和方法5，后来经常使用方法3了；

---

                  ----萝卜青菜，各取所爱！----