## 一、盒模型 當你的瀏覽器展現一個元素時，這個元素會占據一定的空間。這個空間由四部分組成。 * `Margin(外邊距)`清除邊框外的區域，外邊距是透明的。 * `Border(邊框)`圍繞在內邊距和內容外的邊框。 * `Padding(內邊距)`清除內容周圍的區域，內邊距是透明的。 * `Content(內容)`盒子的內容，顯示文本和圖像。  ## 二、浮動 浮動元素會脫離文檔流并向左/向右浮動，直到碰到父元素或者另一個浮動元素。浮動的元素在普通文檔流的上面一層，更靠近屏幕的上層。 ``` div { float: left; } ``` :-:  默認三個設置了寬高的`block`元素，本來會格子獨占一行；如果框1設置了`float:right`，他會忽略框2和框3，直到碰到父元素；如果，框1設置成`float:left`，就會覆蓋住處在普通文檔流中的框2。  * 浮動會向左/向右浮動，直到碰到另一個浮動元素為止，這樣可以使區塊元素在一行顯示。 * 當三個區塊都浮動，而一行的空間不夠了，會引起元素換行。 * 但是如果每個元素的高度不一致，會出現“卡住”的情況。 ~~~ <style> .box-wrapper { border: 5px solid red; } .box { float: left; width: 100px; height: 100px; margin: 20px; background-color: green; } </style> <div class="box-wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> ~~~  很明顯，這樣的效果并不符合我們的預期，所以我們需要想辦法解決這個問題。現在，我們需要清除浮動！ 清除浮動的底層原理是在被清除浮動的元素上邊或者下邊添加足夠的清除空間。**我們是通過在別的元素上清除浮動來實現撐開高度的， 而不是在浮動元素上。** ``` <div class="box-wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div style="clear:both;"></div> </div> ``` ## 三、定位 CSS 有三種基本的定位機制：普通流、浮動和定位。 position 屬性設置元素定位類型，可以通過 top, bottom, right, left屬性，控制元素的定位位置。position 屬性值有`static`、`relative`、`absolute`、`fixed`四個值。 * `static`靜態定位：HTML元素的默認值，即沒有定位，元素出現在正常的流中。 * `fixed`固定定位：脫離標準流，在頁面中不占位置，永遠相對于瀏覽器的邊框來定位。 * `relative`相對定位：不脫離標準流，在頁面中占位置，相對于自己原來的位置來進行定位。 * `absolute`絕對定位：脫離標準流，在頁面中不占位置（浮起來），絕對于已經定位的上層元素，若沒有則絕對于頁面主體 body。