第十五课 div css当中DIV浮动原理和应用详解答
本帖最后由 asp老师 于 2014-12-4 14:23 编辑那么上节课我们讲了在div 和css当中的 margin外边距 和padding内边距的设置方法以及关于如何去设置她们的数值的方法，如果您还对div css当中的知识不太清楚的话，您可以参考这个文件：
第十四课 div css当中 DIV内边距和外边距概念讲解
好，那么我们开始今天的课程了，首先呢，我们新建一个15.html的文件以及15.css的文件，并且我们把这个15.css文件引入我们的15.html当中15.html当中的源代码如下：
<body>
<div class="aaa">111</div>
<div class="bbb">222</div>
</body>15.css文件代码如下；
.aaa{width:300px; height:150px; background:#F00;}
.bbb{width:300px; height:150px; background:#0F0;}
那么此时的效果如下：
此时呢，我们可以介绍下文本流的概念：我们写一排很多的文字，当我们文字占据了网页的一行的时候，会自动的往下面令一行开始写起，那么这样的文字如流水一般，我们统称为文本流。
如果我们修改css代码如下：
.aaa{width:50px; height:50px; background:#F00;}
.bbb{width:300px; height:150px; background:#0F0;}效果如下;
好，此时如果我们继续把.aaa后面的css代码加一个属性为float:left; 那么此时的css代码如下：
.aaa{width:50px; height:50px; background:#F00; float:left;}
.bbb{width:300px; height:150px; background:#0F0;}
效果如下：
大家此时可以看到，这个.aaa的div已经好像是浮动到.bbb的div的上方了，那么我们这个就是float:left; 的效果
好，我们如果继续把.bbb的属性也添加一个float:left; 的属性，我们来看下会有什么样的效果出现呢！
.aaa{width:50px; height:50px; background:#F00; float:left;}
.bbb{width:300px; height:150px; background:#0F0; float:left;}那么此时的效果如下：
大家此时可以看到，我们出现了第二个的.bbb的div现在也是左浮动但是呢，却是和第一个.aaa的div考到一起了，这个大家可以理解为，默认的没有float的为一个层，比如是人间平民，如果加了float那么就到了云霄殿，而这2个都加了float，表示这2个都到了云霄殿，但是呢，到了云霄殿就要遵守云霄殿的规则，也是先来后到，要排队。则会出现这样的效果；
如果我们在15.html当中在加一个div呢，我们来看源代码
<body>
<div class="aaa">111</div>
<div class="bbb">222</div>
<div class="ccc">333</div>
</body>
同时呢，我们在到15.css当中定义我们的属性；代码如下：
.aaa{width:50px; height:50px; background:#F00; float:left;}
.bbb{width:300px; height:150px; background:#0F0; float:left;}
.ccc{width:300px; height:150px; background:#FF0; float:left;}那么此时的效果是什么呢？
我们分析下这个代码：
我们加了一个.ccc的div同时呢，我们又让这个.ccc的div也到了云霄殿加了一个float:left; 的属性效果；好我们来看这个效果如下：
如果我们把第二个不加float呢，代码如下
.aaa{width:50px; height:50px; background:#F00; float:left;}
.bbb{width:300px; height:150px; background:#0F0; }
.ccc{width:300px; height:150px; background:#FF0; float:left;}
效果如下
那么此时我们看到，第一个加了float，那么它脱离了文本留，但是呢，第二个没有脱离，好那么第二个顶替了第一个的文本流的位置，而第三个也float了，它又挨着第二个，如果此时我们加了另一个div，源代码如下：
<body>
<div class="aaa">111</div>
<div class="bbb">222</div>
<div class="ccc">333</div>
<div class="ddd">444</div>
</body>此时我们在定义.ddd的属性，css代码如下
<blockquote>.aaa{width:50px; height:50px; background:#F00; float:left;}
那么此时我们来分析下这段代码
第一个.aaa的div 浮动了，第二个没有浮动，那么第二个顶了一个位置；第三个和第四个都浮动了，但是因为第二个没有浮动所以第三个和第四个只能是仅仅挨着的。那么效果如下；
---------------------------------------------------修改代码如下--------------
.aaa{width:50px; height:50px; background:#F00; float:left;}
.bbb{width:300px; height:150px; background:#0F0;float:left; }
.ccc{width:300px; height:150px; background:#FF0; float:right; }
.ddd{width:300px; height:150px; background:#00F; float:right;}
页:
[1]