css之浮动篇

float 

简单介绍：

1、浮动的原理：使当前的元素脱离普通流（html的文档流是从上到下，从左到右，遇块换行），相当于浮动起来，浮动的框可以左右移动，直到他的外边缘遇到包含框或者另一个浮动框的边缘；

2、浮动的影响：a、对附近的元素布局造成改变，使得布局混乱；b、浮动后的元素相当于块级元素，可以设置宽度和高度，我更倾向于display:inline-block;c、高度塌陷；

问题整合：

1. 浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界（padding）
2. 浮动元素的左（或右）外边际必须是源文档中之前出现的左（或右）浮动元素的右（左）外边界，除非后出现浮动元素的顶端在先浮动元素的底端下面。Ps：防止浮动元素被覆盖
3. 左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边边界的左边。Ps：防止浮动元素相互重叠。
        body宽度为500px 内含2个宽度为300px浮动元素A，B 。A 左浮动 B右浮动
        A和B不会相互重叠 100px B向下浮动之后再像右浮动。
4. 一个浮动元素的顶端不能比其父元素的内顶端更高。（不超过其内边距）
5. 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶级更高。Ps：要求浮动元素不能一直浮动到父元素的顶端；
6. 如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含钙元素生成框的任何行框的顶端至高。Ps：进一步限制了元素的向上浮动，不允许元素浮动到包含该浮动元素之前内容的行的顶端之上
7. 左（或右）浮动元素的左边（右边）有另一个浮动元素，前者的右外边界不能再其包含块的右（左）边界的右边（左边）。
Ps:简明的说就是 如果没有足够的空间，浮动元素会被挤到一个新的“行”上。
8. 浮动元素必须尽可能高地放置。Ps:在满足其他约束条件的前提下，浮动尽可能高。
9. 左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远。位置越高，就会向右或向左浮动的越远。

常用问题：

1. float:left; 和 display:block; 后者毫无意义。

2. 解决高度塌陷的问题 – 清除浮动 

    1） 投机取巧法 无任何兼容性问题 但是浪费一个标签 不推荐使用

    2）overflow + zoom方法 有局限性，在margin为负值的时候。不推荐使用
       

 .fix {overflow:hidden; zoom:1;}       

zoom:1;清除浮动，触发haslayout
     3）伪类方法  推荐使用
         

.fix {zoom:1;}
.fix:after {
    display:block; 
    content:''; 
    clear:both; 
    line-height:0; 
    visibility:hidden;
}

a、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素

b、content属性是必须的，但其值可以为空