网页乱版怎么办？可能是CSS的float属性在捣乱

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

首先介绍一些浮动模型的基本知识：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框 或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.《CSS Mastery》里作者画了几个图非常有意思，可以帮助我们理解浮动的表现，我简单的画几个。

不浮动     
<div style="border: solid 5px #0e0; width:300px;">          
    <div style="height: 100px; 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>

 

 

//红向右浮动 <div style="border: solid 5px #0e0; width:300px;">     
    <div style="height: 100px; width: 100px; background-color: Red; float:right;"> </div>     
    <div style="height: 100px; width: 100px; background-color: Green; "> </div>     
    <div style="height: 100px; width: 100px; background-color: Yellow;"> </div> </div>

 

 

//红框左移,覆盖绿框  <div style="border: solid 5px #0e0; width:300px;">      
    <div style="height: 100px; width: 100px; background-color: Red;  float:left;"> </div>     
    <div style="height: 100px; width: 100px; background-color: Green;"> </div>      
    <div style="height: 100px; width: 100px; background-color: Yellow;"> </div>  </div>

 

 

//都向左浮动,父元素宽度为0 <div style="border: solid 5px #0e0; width:300px;">      
    <div style="height: 100px; 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>

 

 

如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,,直到有足够的扣减,如果浮动元素的高度不同,那么下下移动的时候可能被卡住

没有足够水平空间 <div style="border: solid 5px #0e0; width:250px;">      
    <div style="height: 100px; 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>

 

 

卡住了 <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>

 

 

行框和清理

前面指出浮动会让元素脱离文档流,不影响不浮动元素.实际上并不完全如此,如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。

不浮动  <div style="border: solid 5px #0e0; width: 250px;">     
    <div style="height: 50px; width: 50px; background-color: Red;"></div>     
    <div style="height: 100px; width: 100px; background-color: Green;"> 11111111111
         11111111111 </div>  </div>

 

 

浮动  <div style="border: solid 5px #0e0; width: 250px;">      
    <div style="height: 50px; width: 50px; background-color: Red; float:left;"></div>     
    <div style="height: 100px; width: 100px; background-color: Green;"> 11111111111
           11111111111 </div>  </div>

 

可以看出浮动后虽然绿色div布局不受浮动影响，正常布局，但是文字部分却被挤到了红色浮动div下边。要想阻止行框围绕在浮动元素外边，可以使用clear属性，属性的left，right，both，none表示框的哪些边不挨着浮动框。

 

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

 

对元素清理实际上为前面的浮动元素留出了垂直空间,这样可以解决我们之前的一个问题，看前面的图片的时候我们发现div内的所有元素浮动的话就会不占据文档空间，这样父元素，高度为0，可能很多效果也不见了，那么这个时候我们就可以使用clear属性来清楚浮动，达到我们预想的效果。

 

//都向左浮动,父元素宽度为0  <div style="border: solid 5px #0e0; width:300px;">      
    <div style="height: 100px; 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>

如果我们想让父元素在视觉上包围浮动元素可以向下面这样处理

 

 

在最后添加一个空div，对它清理

<div style="border: solid 5px #0e0; width:300px;">     
    <div style="height: 100px; 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 style="clear:both;"></div>  </div>

 

当然这样做有很多缺点，有些javascript也可以做出类似效果，这里不细说，值得注意的是应用值为hidden或auto的overflow属性会有一个副作用：自动清理包含的任何浮动元素，所以说当页面出现相关问题时，可以看看是不是这个属性搞的鬼。

 

这样，有了这些基本知识后，我们应用CSS的时候就可以解决很多以前很百思不得其解的问题了。

我在制作自己的网站 : 妆美丽 www.zhuangmeili.com 的时候，就碰到过很多问题，现在想想，都可以归类为对css的float和clear属性不太了解导致的，所以，大家把这个理论知识学习透彻之后，就可以很顺利的做出自己的网站，获取自己的小收入。

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