主流清浮动方法

浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
 
    正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
 

主流清浮动方法：

after伪类： 元素内部末尾添加内容；
        :after{content"添加的内容";} IE6，7下不兼容
zoom 缩放
        a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
        b、FF 不支持；
 
 
1
2
3
4
5
6
7
8
9
10
11
.clearfix:before, .clearfix:after { 
    content:""; 
    display:table; 
} 
.clearfix:after{ 
    clear:both; 
    overflow:hidden; 
} 
.clearfix{ 
    *zoom:1; 
}

 





posted @ 2016-03-02 16:09  staven  阅读(205)  评论(0)  编辑  收藏  举报