标签:
一、为什么需要浮动?
块级元素不能与任何元素标签在同一行,行级元素虽然可以和行级元素在同一行,但是无法调整元素的宽高!
所以标准的文档流限制太多,非常生硬,不够灵活。
为了让行内元素有并排的效果,也要能设置宽高,所以就需要浮动。
二、关于浮动的性质。
浮动的元素会脱离标准的文档流!!这个很重要!
当为标签设置了浮动之后,这个标签就可以有宽和高属性,即使是未转换的行内元素也可以设置宽和高。
一个行级标签,不需要转成块级元素,就可以设置宽度和高度!
一旦一个元素标签浮动了,那么,浮动的标签之间就可以并排,而且可以设置宽高,无论是行内标签还是块级标签。
浮动的元素还会互相贴靠。
下面有个例子,直接可以理解下,什么是浮动,脱标。
.box1{
float: left;
width: 300px;
height: 400px;
background-color: yellowgreen;
}
.box2{
float: left:
width: 400px;
height: 400px;
background-color: skyblue;
}
此时,两个块级元素并排在了一起。
那么接下来把代码改一下:
.box1{
float: left;
width: 300px;
height: 400px;
background-color: yellowgreen;
}
.box2{
# 在这里去掉了box2 的浮动
width: 400px;
height: 400px;
background-color: skyblue;
}
结果变成了这样,box1直接盖在了box2的上面,这是因为box1已经脱离了标准文档流,box2还是普通文档流,在box2之前已经没有普通的文档流了,所以box2也会贴到最边上。
标签:
来源: http://blog.51cto.com/suhaozhi/2339248