CSS深入理解之float

float 属性定义元素在哪个方向浮动。产生之初这个属性总应用于图像&＃xff0c;使文本围绕在图像周围&＃xff0c;不过在 CSS 中&＃xff0c;任何元素都可以浮动。浮动元素会生成一个块级框&＃xff0c;而不论它本身是何种元素。如果浮动非替换元素&＃xff0c;则要指定一个明确的宽度&＃xff1b;否则&＃xff0c;它们会尽可能地窄。让设置的标签产生浮动效果&＃xff0c;就是脱离原来页面的标准输出流。

HTML页面的标准文档流(默认布局)&＃xff1a;

从上到下&＃xff0c;从左到右&＃xff0c;遇到块级元素换行。
如果想实现左右结构&＃xff0c;float是一种选择&＃xff08;当然还有其他方法&＃xff09;。
比如&＃xff1a;

这样&＃xff0c;这个两个DIV标签就在同一行上了&＃xff08;同时靠左&＃xff09;&＃xff0c;当然有个前提&＃xff0c;就是他们俩的父元素的宽度要至少大于400px&＃xff0c;这样才能在同一行上。这个结果是两个DIV的右侧会空出100px的空白。

以上写法&＃xff0c;也是在同一行。不同的是&＃xff0c;一个靠左&＃xff0c;一个靠右。不过这里边的两个DIV的中间有100px的空白。

需要注意的是&＃xff0c;当标签使用了float属性后&＃xff0c;就脱离了标准输出流&＃xff0c;就不受页面约束了。这样不方便&＃xff0c;也不利于页面布局。所以&＃xff0c;一般浮动之后要清除浮动。
浮动元素在文档流空出的位置&＃xff0c;由后续的(非浮动)元素填充上去&＃xff1a;块级元素直接填充上去&＃xff0c;若跟浮动元素的范围发生重叠&＃xff0c;浮动元素覆盖块级元素。内联元素&＃xff1a;有空隙就插入。&＃xff08;此句引自博客园方木一&＃xff09;

这样&＃xff0c;页面整体的布局结构就基本上没有被破坏了。

.float_r{width:56px;float:right;}
.float_flow{margin-right:76px;}


上边这个是右浮动&＃xff1b;改变DOM位置的流动布局写法。

.float_l{with:100%;float:left;}
.float_flow{margin-right:76px;}
.head_l{width:56px;float:left;margin-left:-56px;}


上边这个是左浮动&＃xff1b;不改变DOM位置的流动布局写法。