示意圖（圖檔來自w3school）：
說明：上圖中，由内而外依次是
元素内容（content）
内邊矩（padding-top、padding-right、padding- bottom、padding-left）
邊框（border-top、border-right、border-bottom、border- left）
外邊距（marging-top、margin-right、margin-bottom、margin-left）。
内邊距、邊框和外邊距可以應用于一個元素的所有邊，也可以應用于單獨的邊。而且，外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。
元素框的最内部分是實際的内容，直接包圍内容的是内邊距。内邊距呈現了元素的背景。内邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，是以不會遮擋其後的任何元素。
提示：背景應用于由内容和内邊距、邊框組成的區域。
内邊距、邊框和外邊距都是可選的，預設值是零。但是，許多元素将由使用者代理樣式表設定外邊距和内邊距。可以通過将元素的 margin 和 padding 設定為零來覆寫這些浏覽器樣式。這可以分别進行，也可以使用通用選擇器對所有元素進行設定：
在 css 中，width 和 height 指的是内容區域的寬度和高度。增加内邊距、邊框和外邊距不會影響内容區域的尺寸，但是會增加元素框的總尺寸。
假設框的每個邊上有 10 個像素的外邊距和 5 個像素的内邊距。如果希望這個元素框達到 100 個像素，就需要将内容的寬度設定為 70 像素，請看下圖（圖檔來自w3school）：
其所用圖檔：
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由于浮動框不在文檔的普通流中，是以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
請看下圖，當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：
再請看下圖，當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，是以它不占據空間，實際上覆寫住了框 2，使框 2 從視圖中消失。
如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
如下圖所示，如果包含框太窄，無法容納水準排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”：
css float 屬性
在 css 中，我們通過 float 屬性實作元素的浮動。
背景不能顯示
由于浮動産生，如果對父級設定了（css background背景）css背景顔色或css背景圖檔，而父級不能被撐開，是以導緻css背景不能顯示。
邊框不能撐開如上圖中，如果父級設定了css邊框屬性（css border），由于子級裡使用了float屬性，産生浮動，父級不能被撐開，導緻邊框不能随内容而被撐開。
3、margin padding設定值不能正确顯示由于浮動導緻父級子級之間設定了css padding、css margin屬性的值不能正确表達。特别是上下邊的padding和margin不能正确顯示。
解決方法：
clear: both清除産生浮動
父級div定義 overflow:hidden
對父級css選擇器加overflow:hidden樣式，可以清除父級内使用float産生浮動。優點是可以很少css代碼即可解決浮動産生。
上面的代碼就是.clearfix的定義和應用，簡單的說下.clearfix的原理：
在ie6, 7下zoom: 1會觸發haslayout，進而使元素閉合内部的浮動。
在标準浏覽器下，.clearfix:after這個僞類會在應用到.clearfix的元素後面插入一個clear: both的塊級元素，進而達到清除浮動的作用。
在需要清除浮動的時候，隻要寫一個.clearfix就行了，然後在需要清浮動的元素中 添加clearfix類名就好了。