css 之 float

【1】设置了float 属性后的效果

（1）浮动元素会从普通文档流中脱离，不会占据正常文档的位置，但浮动元素影响的不仅是自己，还会影响周围元素的对齐进行环绕；

（2）不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height

（3）浮动元素在浮动的时候，其margin不会超过包含块的padding，即浮动元素的浮动位置不能超过包含块的内边界，浮动元

素的包含块就是离浮动元素最近的块级祖先元素

（4）浮动元素会按顺序排下来而不会发生重叠的现象。

（5）float元素会占据行内元素的空间，会影响周围行内元素的位置。

        float元素不会占据块级元素的空间，下一个块级元素会当没有浮动元素的出现，而出现在浮动元素的位置；这个现象出现

的解决办法就是为clear属性赋值，left，right，或者both。

（6）父元素如果不加overflow：hidden的时候，float元素不会出现在父元素内，或者父元素不被该元素撑开，没有高度。

【2】浮动元素的重叠问题

（1）行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上

（2）块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上

【3】clear

clear属性用于确保当前元素的左右两侧不会有浮动元素，clear只对元素本身的布局起作用。

【4】float 的应用

（1）文字环绕效果

（2）横向菜单排列

（3）

【5】清楚浮动

http://blog.csdn.net/webxiaoma/article/details/52758264 （转载）