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;这时设置的宽高有效了,这是为啥?
这就验证了我开头的一段话呀!