网页乱版怎么办？添加clear属性禁止浮动

来源：互联网发布：旋转门plc编程编辑：程序博客网时间：2024/05/22 01:28

这是我从到到尾，自己用html+css+div+thinkphp做的一个网站，没有用任何模板。虽然目前还不是很完善，但随着自己不断的学习，不断的努力，一定会越来越好。欢迎大家访问我的博客，让我们天天进步一点点，让这些文章记录我们从菜鸟到高手的点点滴滴。
以下都是我在制作我的妆美丽网站的时候碰到的一些问题，希望对大家有用。同时也欢迎大家访问 www.zhuangmeili.com
假如你也在学习做网站，假如你觉得我的网站某个地方做的还可以，或者你想得到一些相关的源码，那请留言在评论区。

这是我在建站的时候碰到的一个问题：我的网站上（www.zhuangmeili.com ）的图片假如不是三个排列的话，落单的图片会嵌入到最底下的“关于我们”那儿，后来使用
clear解决了这个问题。那么clear属性使用和不使用，到底会有什么效果呢，让我们做个试验看看吧：
1.都不浮动，垂直排列：

点击(此处)折叠或打开

<div style="border: solid 5px #0e0; width:250px;">
        <div style="height: 120px; width: 100px; background-color: Red;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
</div>

效果：

2.浮动

点击(此处)折叠或打开

<div style="border: solid 5px #0e0; width:250px;">
        <div style="height: 120px; width: 100px; background-color: Red; float:left;">
        <!--</div>
        <div style="height: 100px; width: 100px; background-color: Green; float:left;">
        <!--</div>
        <div style="height: 100px; width: 100px; background-color: Yellow;">
        <!--</div>
</<!--div>

效果：

黄色框被绿色框遮住；

3.浮动的卡住效应

点击(此处)折叠或打开

<div style="border: solid 5px #0e0; width:250px;">
        <div style="height: 120px; width: 100px; background-color: Red; float:left;">
        </<!--div>
        <div style="height: 100px; width: 100px; background-color: Green; float:left;">
        <!--</div>
        <div style="height: 100px; width: 100px; background-color: Yellow; float:left">
        <!--</div>
</div>

效果：

黄色框被卡住

4.清除浮动

点击(此处)折叠或打开

<div style="border: solid 5px #0e0; width:250px;">
        <div style="height: 120px; width: 100px; background-color: Red; float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green; float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow; clear:both;">
        </div>
</div>

效果

对黄色框的clear其实是为上面的两个浮动元素留出了垂直空间。
这样，有了这些基本知识后，我们应用CSS的时候就可以解决很多以前很百思不得其解的问题了。
我在制作自己的网站 : 妆美丽 www.zhuangmeili.com 的时候，就碰到过很多问题，现在想想，都可以归类为对css的float和clear属性不太了解导致的，所以，大家把这个理论知识学习透彻之后，就可以很顺利的做出自己的网站，获取自己的小收入。

来源：http://blog.chinaunix.net/uid-20727076-id-3979702.html

0 0