float : 浮动

什么是 CSS Float(浮动)?

浮动会使元素向左或向右移动,其周围的元素也会重新排列。
浮动只能在水平方向移动,只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果一个元素向右浮动,其它元素没有浮动,将会按照正常的文档流布局。

正常效果

<div style="border:1px solid #d1d1d1;padding:10px;">
    <div>
        <img src="http://usr.im/200x60?text=1&bg=000000"/>
    </div>
    <div>
        <img src="http://usr.im/200x60?text=2&bg=ff0000"/>
    </div>
</div>

使用浮动后的效果

左浮动

<div style="border:1px solid #d1d1d1;padding:10px;height:80px;">
    <div style="float: left;">
        <img src="http://usr.im/200x60?text=1&bg=000000"/>
    </div>
    <div style="float: left;">
        <img src="http://usr.im/200x60?text=2&bg=ff0000"/>
    </div>
</div>

右浮动

<div style="border:1px solid #d1d1d1;padding:10px;height:80px;">
    <div style="float: right;">
        <img src="http://usr.im/200x60?text=1&bg=000000"/>
    </div>
    <div style="float: right;">
        <img src="http://usr.im/200x60?text=2&bg=ff0000"/>
    </div>
</div>

同时针对不同元素左右浮动

<div style="border:1px solid #d1d1d1;padding:10px;height:80px;">
    <div style="float: left;">
        <img src="http://usr.im/200x60?text=1&bg=000000"/>
    </div>
    <div style="float: right;">
        <img src="http://usr.im/200x60?text=2&bg=ff0000"/>
    </div>
</div>

清除浮动

从上面的例子上可以看到,在写上浮动后,父类元素都固定了高度的,
这个不利用多元素布局,这里就需要清除浮动。
看下一章清除浮动,或者点击下面的链接查看如何清除浮动。

清除浮动