浮动，是css布局中必须经过的一道坎，如果不熟悉浮动，那么css的布局就如同空中楼阁，而谈到浮动，更多的是和div相结合，div是一个块级元素，这个我前面的博文有介绍，如果大家喜欢我的风格，可以搜索下。
下面我们进入正题，所谓浮动，可以用css的属性float来定义，比如float:left就是向左浮动，float：right就是向右浮动，我们先看一个不浮动的例子把，首先是这个html文件，这个文件我们是一直都不会动它了，它的内容如下：
立即学习“前端免费学习笔记（深入）”；
区块1区块2区块3区块4
登录后复制然后我们写一下它的对应的my.css文件，内容如下：
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
#demo1{background-color: #933;height: 100px;width:300px; }#demo2{background-color: #0F0;height:60px;width:200px;}#demo3{background-color: #F00;height: 140px;width: 80px;}#demo4{background-color: #CCC;height: 80px;width: 180px;}
登录后复制那么此时它的界面如下：
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
下面我们通过在第二个div那里让它右浮动，添加下面一条信息，即：
立即学习“前端免费学习笔记（深入）”；
#demo2{float: right;background-color: #0F0;height:60px;width:200px;}
登录后复制我上面只给出了demo2的变化，然后我们看下面的效果：
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
下面说一下什么是“普通流”，可能这是会让新手朋友特别迷茫的一个话题，所谓普通流，就是向书本一样，从上到下，从左到右进行布局，正常的HTML元素都是在普通流中的，而一个元素一旦浮动，它就不在普通流中了。比如我们的区块2是右浮动的，它会去寻找他的上边一个元素，它上一个元素是区块1，而区块1是普通流中的元素，则区块2就和区块1的底部是对齐的，普通流决定了它的上下位置，浮动只能决定它的左右位置，一旦上下位置 被确定，那么接下来就是它的左右位置了，由于它是右浮动，因此，它在右边。而区块三去找它的上一个元素，发现它的上一个元素是标准流中的元素，因此，它会自动和区块1的低端对齐，并且向下排列。
那可能有人会问，如果区块2左浮动呢，我们把demo2的float属性修改为left，并且我们修改一下区块三的宽度，让它更宽一些，要不解释不清楚，效果图如下：
我想上图的解释也算比较清楚了，就不再文字说明了。可能有人会问，那么如果两个区块一起浮动呢？我们先来看都是右浮动的情形：
由于这里的宽度足够宽，这种布局完全放得下，但是，如果我们把宽度变窄呢？看下面图解：
其实这里还算好理解的，那么我们继续向左拉伸呢？会出现下面的情况：
其实只要宽度足够宽，区块3依然是和区块2的左边而不是在它的下面，但是宽度太低的情况下就不是这样了，它很无奈的跑到了区块2的下面，然后另起一行，从右边开始排列。
其实右浮动会定位了，那么左浮动也就很清楚了，它的效果如下：
其实同样的，如果空间过小，那么区块3也会被挤下去，挤到新的一行中，如下代码：
于是，可以总结为这么一句话：“浏览器首先对处于普通流的区块进行排列，它们很简单，从上到下进行排列即可。对于浮动的元素，它会查看它上面的元素最近的哪一个处于普通流中的元素，并且把它的底端当成自己的顶端，然后根据浮动规则，继续排列。由于是先进行的普通流的布局，因此，浮动的元素会遮盖普通流中的元素。”
这一节先讲到这里啦。。。 下面再开始说清楚浮动的。。。。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3092137.html
