float浮动布局
任何元素都可以浮动，浮动后会脱离文档流，但需要注意的是，无论它本身是块状元素还是行内元素或是其他类型元素，都会生成一个块级框，就我个人的理解:无论何种类型的元素设置了float,都会变成inline-block元素。
常用属性：左浮动、右浮动、不浮动
| 属性值 | 说明 |
|---|---|
| left | 向左浮动 |
| right | 向右浮动 |
| none | 不浮动 |
一起来运用一下吧
Demo1
<style>
.one{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<body>
<div class="one">我是第一个div</div>
<div class="two">我是第二个div</div>
</body>
运行结果如下：
？？？？？
问：什么情况，我的蓝色的div呢，为什么只有蓝色div的里面字？
答：因为给红色div设置了float,所以红色div脱离了文档流，那么蓝色div就要上去顶替位置啊，所以蓝色div在红色div后面，只不过被挡住了。
问：那为什么字还在下面，没有随蓝div一起？
答：虽然会以某种方式将浮动元素（红色div）从文档的正常流中删除，但是还是会影响布局，之所以说红色div脱离了文档流，是因为蓝色div确实占据了红色div之前的位置，好像红色div已经不存在了似的。之所以说会影响布局，是因为蓝色div里的文字并没有随之占据红色div的位置，而是环绕在浮动之后的红色div旁边。这是为了避免红色div将蓝色div里的文字覆盖了，这恰好就是浮动的目的（实现文字环绕图片的效果）！
Demo2
如果我把蓝色的div改成蓝色的span呢？
<style>
.one{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<body>
<div class="one">我是第一个，我是红色div</div>
<span class="two">ffff</span>
</body>
运行结果如上图，
？？？？
问：蓝色span不是应该被覆盖在红色div下面吗？
答：跟上面的原理一样。
虽然我给span设置了宽高，但因为span是行内元素，所以设置的宽高无效，那我为啥要设呢？接着看吧！
<style>
.one{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: blue;
float: left;//注意，我加了这一句
}
</style>
<body>
<div class="one">我是第一个，我是红色div</div>
<span class="two">ffff</span>
</body>
这里的蓝色元素依旧是span，而且我新添加了一句： float: left;这时设置的宽高有效了，这是为啥？
这就验证了我开头的一段话呀！
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
