浮动原理及清浮动笔记

1. 浮动的定义

一句话解释：元素浮动后，会脱离文档流，接着会按照指定的方向移动，一直到碰到父级的边界或另外一个元素为止。浮动的代码：folat: left/right/none ，none 表示为不浮动，完全没有浮动的效果。

2. 浮动的特性（inline-block的进化版）：

1. 使块元素在一行显示；
2. 使内嵌支持宽高；
3. 不设置宽度时，宽度由内容撑开；
4. 脱离文档流（文档流是文档中可显示对象在排列时所占用的位置）；
5. 提升半层层级（元素本身有上下两个半层，下半层为元素本身的属性，比如为元素的边框，背景等；上半层为元素的内容，比如为元素的文字与图片等）。

3. 清除浮动的基本属性

Clear: left/right/both/none 表示的是元素的某个方向不能有浮动元素（ both 是元素两边都不能有浮动元素）。

4. 清浮动方法：

1. 给父级加高度（存在页面中所有元素都要加高度，麻烦！）
2. 给父级也加浮动（存在1.页面中所有元素都要加浮动，麻烦！ 2. margin 左右自动失效的问题）；
3. 给父级加 display：inline-block（存在 margin 左右自动失效的问题）；

4. 在浮动元素下加 <div class="clear"></div>，并在样式表中加 .clear{ height: 0px; font-size: 0; clear: both;}（存在 IE6 下的最小高度问题）：

   1. IE6 下的最小高度问题：在 IE6 下高度小于 19px 的元素，高度会被当做 19px 来处理；
   2. IE6 下的最小高度问题的解决办法：在样式中加入 font-size: 0; ，但 font-size: 0; 最小只能处理 2px 的高度。

5. 在浮动元素下加 <br clear="all"/>（但是不符合 w3c 原则中的结构、样式、行为，三者分离的要求）；

6. 给浮动元素的父级加 overflow ，一定要配合 zoom: 1;（但是 IE6 下不具有包着浮动元素的功能，即没有把元素提升层级的功能，以及 overflow 不支持建立某个元素的子菜单）；

   1. overflow 表示的是当内容溢出时的样式，overflow：auto; 表示的是溢出时显示滚动条；soroll 表示默认显示滚动条；hidden 表示溢出时将内容隐藏。

7. 推荐方法：给浮动元素的父级加以下样式：

.clear{ 
    zoom: 1;
}
.clear:after{ 
    content: ""; 
    display: block; 
    clear: both;
}

5. 不需清浮动的情况

1. 在 IE6,7 下浮动元素的父级有宽度就不用清浮动；
2. 在 IE6,7 下不支持 after 伪类；
3. haslayout ：根据元素内容的大小或者父级的大小来重新计算元素的宽高。以下情况会激发 haslayout ：
   
   1. display: inline-block;
   2. height: (任何值除了 auto );
   3. float: (left 或 right);
   4. width: (任何值除了 auto );
   5. zoom: (除 normal 外任意值);