一.標準文件流：指元素根據塊元素或行內元素的特性按從上到下，從左到右的方式自然排列。這也是元素預設的排列方式
二.display屬性
display:更改塊級元素和行內元素的相互轉換
block：塊級元素的預設值
inline：行內元素的預設值
inline-block:同時具有行內和塊級元素的特性
none：隱藏元素內容
三.float浮動
left 元素向左浮動
right 元素向右浮動
none 預設值。元素不浮動，並會顯示在其文字中出現的位置
<style type="text/css">
.layer01{
float: left;
}
.layer02{
float: right;
}
</style>
四.clear清除浮動
left 在左側不允許浮動元素
right 在右側不允許浮動元素
both 在左、右兩側不允許浮動元素
none 預設值。允許浮動元素出現在兩側
<style type="text/css">
.layer01{
clear:left;
}
.layer01{
clear:right;
}
.layer01{
clear:both;
}
</style>
五.解決父級邊框塌陷的方法
1.浮動元素後面加空div
<div class="layer05">
<style type="text/css">
.layer05{
clear: both;
}
</style>
2.設定父元素的高度
<style type="text/css">
#father{
height: 500px;
}
</style>
3.父級新增overflow屬性
visible 預設值。內容不會被修剪，會呈現在盒子之外
hidden 內容會被修剪，並且其餘內容是不可見的
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘內容
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容
<style type="text/css">
#father{
overflow: hidden;
}
</style>
4.父級新增偽類after
<div id="father" class="clear"></div>
<style type="text/css">
.clear:after{
content: ''; /*在clear類後面新增內容為空*/
display: block; /*把新增的內容轉化為塊元素*/
clear: both; /*清除這個元素兩邊的浮動*/
}
</style>
六.inline-block和float的區別
display:inline-block
可以讓元素排在一行，並且支援寬度和高度，程式碼實現起來方便
位置方向不可控制，會解析空格
IE 6、IE 7上不支援
float
可以讓元素排在一行並且支援寬度和高度，可以決定排列方向
float 浮動以後元素脫離文件流，會對周圍元素產生影響，必須在它的父級上新增清除浮動的樣式