html浮动文档流,html非标准文档流（浮动）整理。

标签：

一、为什么需要浮动？

块级元素不能与任何元素标签在同一行，行级元素虽然可以和行级元素在同一行，但是无法调整元素的宽高！

所以标准的文档流限制太多，非常生硬，不够灵活。

为了让行内元素有并排的效果，也要能设置宽高，所以就需要浮动。

二、关于浮动的性质。

浮动的元素会脱离标准的文档流!！这个很重要！

当为标签设置了浮动之后，这个标签就可以有宽和高属性，即使是未转换的行内元素也可以设置宽和高。

一个行级标签，不需要转成块级元素，就可以设置宽度和高度！

一旦一个元素标签浮动了，那么，浮动的标签之间就可以并排，而且可以设置宽高，无论是行内标签还是块级标签。

浮动的元素还会互相贴靠。

下面有个例子，直接可以理解下，什么是浮动，脱标。

.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