CSS定位机制与clear:both的使用

来源:互联网 发布:linux下安装wine软件包 编辑:程序博客网 时间:2024/03/29 01:37

<divstyle="clear:both;"></div>

参考博客:http://blog.sina.com.cn/s/blog_4a3789a70100jfv4.html


CSS的定位机制有3种:普通流、浮动(float:left/right/none)和定位 (position:static/relative/absolute/)。


普通流就是正常的文档流,在HTML里面的写法就是从上到下,从左到右的排版布局。


浮动(float):

测试1:

<div style="border:2px solid red;">
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
        <div style="clear:both;"></div>
</div>


测试2:

<div style="border:2px solid red;">
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>



    浮动float是脱离文档流,不占空间的,所以它会忽略文档流的存在而浮在已有东西的上面。所以最外层div就空了,背景只能看到一条线。

    Clear:both;其实就是利用清除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。


看另一个例子:

    <p style="float:left;width:200px;">这个是第1列,</p>
    <p style="float:left;width:400px;">这个是第2列,</p>
    <p style="clear:both;">这个是第3列。</p>



前两个都设置了轻浮动,如果没有clear:both,则第三个<p>内容与前面在同一行。

其实是第一列和第二列悬浮,而第三列占用了第一列的位置,使得第一列和第二列覆盖第三列。




定位(position

Static:保持文档流。

Relative:相对本身的原始位置发生位移且保持文档流,占空间。

Absolute:脱离文档流,不占空间且相对于其包含块来定位。

详见:http://blog.csdn.net/zjut_acm/article/details/44944611

0 0