神烦之float

另外一篇文章 ： css float

 

一 历史

　　Float的设计初衷仅仅是：文字环绕效果（向word中的文字环绕效果）

二 特性

　　1.包裹性：块级元素如果不设置float，它默认会撑满整个屏幕，而如果设置了float，则只会包裹住其内容。

　　　　例子：

　　　　　没有float的div：

　　　　　

　　　　　添加了float的div：

　　　　　

　　2.破坏性：设置了float的元素会脱离文档流，会导致其父元素出现“坍塌”的现象（如果父元素中没有其他子元素，或者其他子元素均设置了浮动，父元素的height会变成0）

　　3.清除空格。

 

三 清除浮动的影响

　　通常做法(1或2)：　　

　　　　1.在父元素底部增加一个<div style="clear:both;"></div>;

　　　　2.设置父元素的伪类选择器样式：

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

　　　　　　注意：使用伪类选择器，ie6/7识别不了。