css-float浮动详细

前言

　　pc端的页面为了保持良好的兼容性，一般会使用css2部分就支持的浮动（float）和定位（postion）来布局。浮动行为怪异，但有迹可循。以下下是在css揭秘一书中总结的浮动内幕。

包含块：浮动元素的包含块就是它的父元素。

浮动的6个行为

　　生成块级框

　　　　浮动会让任何元素生成一个块级框。

　　　　》这意味着行内元素浮动后也能设置宽高了。

　　像气球一样飞起

　　　　浮动元素会从正常流中删除，它会飞到指定方向后再向上靠，直到父元内容区域（padding以内）的顶端。

　　　　》记住会浮动到父元素上padding以内。

　　紧紧围绕

　　　　紧邻的块级元素看不到它，但块中的文本元素会紧紧围绕浮动元素。

　　　　》常用于实现文本包围图片的效果

　　外边距拒绝重叠

　　　　浮动元素之间，相邻的所有浮动元素的外边距都不会重叠。

　　　　》正常流中块元素之间的外边距会重叠，两个块之间的距离最终会以外边距多的一方为标准。

　　包含块高度塌陷

　　　　浮动元素的高度默认不参与父元素高度计算。

　　　　》常说的清除浮动主要就是为了让浮动元素参与父元素高度计算。

　　包含块宽度不够就向下排列

　　　　两个浮动元素宽度相加大于父元素时，后浮动的元素会排列在之前浮动的元素的下方。

　　　　》这就是你使用浮动，让元素水平排列的时候最后一个元素总会掉下来的原因。

注意：元素浮动前务必显示的指定元素的宽度，不然会出现一些无法预计的灵异事件。