網頁在解析時，遵循從上向下，從左向右的順序。
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>