网页在解析时，遵循从上向下，从左向右的顺序。
1、从上至上，从左至右的布局。
2、符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。
浮动
浮动的框可以向左或向右移动 直到它的外边缘碰到包含框或另一个浮动框的边框停止为止
会使元素向左或向右移动，其周围的元素也会重新排列。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
在浮动情况下 元素会脱离文档流
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
相近元素的浮动
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
清除浮动
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
clear 指定不允许元素周围有浮动的元素
fllat 指定一个盒子是否可以浮动
他们都可以用 left right none inherit
.浮动的特性
1.支持所有的css样式
2.内容撑开宽高
3.多个元素设置浮动，会排在一排
4.浮动的框可以向左或者向右移动，直到他对外边缘碰到包含框或 另一个浮动框的边框为止。
5.文档流
<style type="text/css">
#father{
width: 710px;
height: 30px;
background-color: lightblue; margin: 100px auto 0;
}
#son1{
width: 500px;
height: 100%;
background: yellow;
/*display: inline-block; */
float: left;
}
#son2{
width: 100px;
height: 100%;
background: black;
/*display: inline-block; */
float: left; }/*
</style>
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>