文檔流
文檔流文檔流處在網頁的最底層，它表示的是一個頁面中的位置，我們所創建的元素默認都處在文檔流中。
元素在文檔流中的特點
塊元素
1.塊元素在文檔流中會獨佔一行，塊元素會自上向下排列。
2.塊元素在文檔流中默認寬度是父元素的100%
3.塊元素在文檔流中的高度默認被內容撐開
內聯元素
1.內聯元素在文檔流中只佔自身的大小，會默認從左向右排列，
如果一行中不足以容納所有的內聯元素，則換到下一行，
繼續自左向右。
2.在文檔流中，內聯元素的寬度和高度默認都被內容撐開
當元素的寬度的值爲auto時，此時指定內邊距不會影響可見框的大小，而是會自動修改寬度，以適應內邊距
浮動
塊元素在文檔流中默認垂直排列，所以這個三個div自上至下依次排開，如果希望塊元素在頁面中水平排列，可以使塊元素脫離文檔流使用float來使元素浮動，從而脫離文檔流。可選值：
none，默認值，元素默認在文檔流中排列
left，元素會立即脫離文檔流，向頁面的左側浮動
right，元素會立即脫離文檔流，向頁面的右側浮動
當爲一個元素設置浮動以後（float屬性是一個非none的值），元素會立即脫離文檔流，元素脫離文檔流以後，它下邊的元素會立即向上移動元素浮動以後，會盡量向頁面的左上或這是右上漂浮，直到遇到父元素的邊框或者其他的浮動元素如果浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素浮動的元素不會超過他上邊的兄弟元素，最多最多一邊齊。
浮動的元素不會蓋住文字，文字會自動環繞在浮動元素的周圍，所以我們可以通過浮動來設置文字環繞圖片的效果。
在文檔流中，子元素的寬度默認佔父元素的全部當元素設置浮動以後，會完全脫離文檔流.塊元素脫離文檔流以後，高度和寬度都被內容撐開。
開啓span的浮動內聯元素脫離文檔流以後會變成塊元素。
簡單的佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*清除默認樣式*/
*{
margin: 0;
padding: 0;
}
/*設置頭部div*/
.header{
/*設置一個寬度*/
width: 1000px;
/*設置一個高度*/
height: 120px;
/*設置一個背景顏色*/
background-color: yellowgreen;
/*設置居中*/
margin: 0 auto;
}
/*設置一個content*/
.content{
/*設置一個寬度*/
width: 1000px;
/*設置一個高度*/
height: 400px;
/*設置一個背景顏色*/
background-color: orange;
/*居中*/
margin: 10px auto;
}
/*設置content中小div的樣式*/
.left{
width: 200px;
height: 100%;
background-color: skyblue;
/*向左浮動*/
float: left;
}
.center{
width: 580px;
height: 100%;
background-color: yellow;
/*向左浮動*/
float: left;
/*設置水平外邊距*/
margin: 0 10px;
}
.right{
width: 200px;
height: 100%;
background-color: pink;
/*向左浮動*/
float: left;
}
/*設置一個footer*/
.footer{
/*設置一個寬度*/
width: 1000px;
/*設置一個高度*/
height: 120px;
/*設置一個背景顏色*/
background-color: silver;
/*居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 頭部div -->
<div class="header"></div>
<!-- 主體內容div -->
<div class="content">
<!-- 左側div -->
<div class="left"></div>
<!-- 中間div -->
<div class="center"></div>
<!-- 右側div -->
<div class="right"></div>
</div>
<!-- 底部信息div -->
<div class="footer"></div>
</body>
</html>
