第十五课 div css当中DIV浮动原理和应用详解答

asp老师 · 发表于 2014-12-3 23:09:26

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 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;}

复制代码

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！