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

时间 2019-11-10

标签 html 非标准文档浮动整理栏目 HTML 繁體版

原文原文链接

1、为何须要浮动？css

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

因此标准的文档流限制太多，很是生硬，不够灵活。spa

为了让行内元素有并排的效果，也要能设置宽高，因此就须要浮动。blog

2、关于浮动的性质。文档

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

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

一个行级标签，不须要转成块级元素，就能够设置宽度和高度！class

一旦一个元素标签浮动了，那么，浮动的标签之间就能够并排，并且能够设置宽高，不管是行内标签仍是块级标签。float

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

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

.box1{

float: left;

width: 300px;

height: 400px;

background-color: yellowgreen;

}

.box2{

float: left:

width: 400px;

height: 400px;

background-color: skyblue;

}

</style>

<body>

</body>

此时，两个块级元素并排在了一块儿。

那么接下来把代码改一下：

.box1{

float: left;

width: 300px;

height: 400px;

background-color: yellowgreen;

}

.box2{

# 在这里去掉了box2 的浮动

width: 400px;

height: 400px;

background-color: skyblue;

}

</style>

<body>

</body>

结果变成了这样，box1直接盖在了box2的上面，这是由于box1已经脱离了标准文档流，box2仍是普通文档流，在box2以前已经没有普通的文档流了，因此box2也会贴到最边上。