摘要：會在元素內容而不是元素后插入一個偽元素使用意味著中新增的子元素會被清除左右浮動元素。這一篇主要介紹了盒子模型，浮動和清除。

這是CSS設計指南的讀書筆記，用于加深學習效果。

上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動。

所謂盒子模型，就是瀏覽器為頁面中的每個HTML元素生成的矩形盒子。這些盒子們都要按照可見版式模型在頁面上排布。

可見的頁面版式主要由三個屬性控制：position、display和float。

position：控制頁面上元素的位置關系

display：控制元素是堆疊、并排還是不在頁面出現

float：提供控制的方式，以便吧元素組成多欄布局

元素盒子的屬性可以分成三組：

邊框(board)。可以甚至邊框的寬窄、樣式和顏色

內邊距(padding)。可以甚至盒子內容區與邊框的間距

外邊距(margin)。可以設置盒子與相鄰元素的間距

元素盒子還有一個背景層，可以改變顏色，也可以添加圖片。

CSS為邊框、內邊距和外邊距分別規定了簡寫屬性，每個簡寫聲明中，屬性值得順序都是上、右、下、左。

比如：

{
  margin-top: 5px; 
  margin-right: 10px;
  margin-bottom: 12px; 
  margin-left: 8px;
}

使用簡寫則為這樣：

{
    margin: 12px 10px 12px 8px;
}

如果有一個值沒寫，那么則使用對邊的值。

比如：

{margin: 12px 10px 12px;}
/*等同于*/
{
    margin: 12px 10px 12px 10px;
}

如果只寫一個值，則4個邊都取這個值。

{margin: 12px;}
/*等同于*/
{margin: 12px 12px 12px 12px;}

另外每個盒子的屬性也分三個粒度，這三個粒度從一般到特殊分別舉例如下：

{
    border: 2px dashed red;
}

混合使用三種粒度的簡寫屬性達成設計目標是很常見的。比如，想為盒子的上邊和下邊添加4像素的紅色邊框，為左邊添加1像素寬的紅色邊框，而右邊沒有。可以這么寫：

{border: 4px solid red;} /* 先給4條邊設置相同的樣式*/
{border-left-width: 1px;} /* 修改左邊框寬度*/
{border-right: none;} /*移出右邊框*/

border 有三個相關屬性。

寬度（border-width)。可以使用thin、medium和thick等文本值，也可以使用除百分比和負值之外的任何絕對值。

樣式（border-style)。有none、hidden、dotted、dashed等文本值。

顏色（border-color）。可以使用任意顏色值，包括RGB、HSL、十六進制顏色值和顏色關鍵字。

內邊距是盒子內容區與盒子邊框之間的距離。

上圖的樣式為：

p {
    font: 16px helvetica, sans-serif; 
    width: 220px; 
    border: 2px solid red; 
    background-color: #caebff;
}

可以看到在沒有設定內邊距的情況下，內容緊挨著邊框。

設定邊框后：

p {
    font: 16px helvetica, arial, sans-serif; 
    width: 220px; 
    border: 2px solid red; 
    background-color: #caebff; 
    padding: 10px;
}

效果如下，可以看到樣式舒服了很多：

內邊距在盒子的內部，所以也會取得盒子背景。也就是說，多出來的內邊距并沒有擠壓文本內容，實際是加在了聲明的盒子寬度之上。

上圖的例子中，第一組是默認情況，第二組是在第一組基礎上添加了邊框，第三組是把第二組的外邊距設置為了0，標題和段落全緊挨在一起了。

推薦大家吧這條規則作為樣式表的第一條規則：

* {margin: 0; padding: 0;}

這條規則是把所有元素默認的外邊距和內邊距都設定為0。這樣，我們可以為那些真正需要添加邊距的元素設定邊距。

比如下邊這個樣式：

p {
    height: 50px;
    border: 1px solid #000;
    backgroundcolor: #fff;
    margin-top: 50px;
    margin-bottom: 30px;
}

如果我們把這個樣式應用到3個前后相接的段落上，由于上邊距和下邊距相鄰，你可能會認為他們之間的外邊距是80（50+30）像素，但是實際上是50像素，這就是邊距疊加。

垂直方向上外邊距會疊加 水平方向的不會
外邊距單位 根據經驗，水平邊距可以使用像素，以便該段文本始終與包含元素邊界保持固定間距，不受自豪變大或變小的影響。而對于上下外邊距，已em 為單位則可以讓段間距隨字號變化而相應增大或縮小。

如果沒有顯式的設置元素的 width 屬性，我們就稱這個盒子沒有寬度。
如果沒有設定 width， 那么這個屬性的默認值是 auto，會讓元素的寬度擴展到與父元素同寬。

我們看個例子?：

 這個元素沒有設置寬度

設置樣式：

body {
    font-family: helvetica, arial, sans-serif;
    size: 1em;
    marging: 0px;
    background-color: #caebff;
}

p {
    margin: 0;
    background-color: #fff;
}

可以看到，不給段落設置寬度，段落會填滿 body 元素。

為了更加明顯，我給段落左右分別加一個邊框，再加一個外邊距。

p {
    margin:0 30px; 
    background-color:#fff; 
    padding:0 20px; 
    border: solid red; 
    border-width: 0 6px;
}

這時段落內容區域變成了 288像素（我把瀏覽器寬度手動調成了400px，400-(20+6+30)x2）。

結論：沒有寬度的元素始終會擴展到填滿其父元素的寬度為止。添加水平邊框、內邊距和外邊距會導致內容寬度減少，減少量等于水平邊框、內邊距和外邊距的和。

還是上邊的例子，我們先把外邊距去掉，固定寬度400px；

p {
    width:400px; 
    margin:0; 
    padding:0 20px;  
    border:solid red;  
    border-width: 0 6px  0 6px;  
    background-color:#fff;
}

可以看到，盒子的寬度并不是400px，而是452像素（400+(20+6)*2）。

再給盒子加上外邊距：

p {
    width:400px; 
    margin:0 30px; 
    padding:0 20px;  
    border:solid red;  
    border-width: 0 6px  0 6px;  
    background-color:#fff;
}

可以看到，這時總寬度達到了512像素（30+6+20+400+20+6+30=512）

結論: 為設定了寬度的盒子添加邊框、內邊距和外邊距，會導致盒子更寬。實際上盒子的 width 屬性設定的只是盒子內容區的寬度，而非盒子整體的寬度

css 設計 float（浮動）屬性的主要目的是為了實現文本繞排圖片的效果，這個屬性也是創建多欄布局最簡單的方式。
我們先看一個例子：

..the paragraph text...

css 規則如下。

p {
    margin: 0;
    border: 1px solid red;
}
img {
    float: left;
    margin: 0 4px 4px 0;
}

這個例子的樣式如圖所示：

這里我們給圖片加了 float: left 樣式，這時瀏覽器就會把圖片向上推，直到它碰到父元素的內邊界（也就是body）。后面的內容不再認為浮動元素在它的前邊，所以它會占據父元素左上角的位置。不過，它的內容會繞開浮動的圖片。

在上面的基初上如何使內容分欄呢？
只要再用一float 屬性就可以了。

p {
    float: left; /* 加上這兩行*/
    width: 200px;
    ...
}

這樣同時浮動圖片和有寬度的段落，會使圖片繞排效果消失，而浮動的段落也向左向上移動。變成了多欄的效果。

看下這個例子：

    
    
It"s fun to float.

應用樣式如下：

section {
    border: 1px solid blue;
    margin: 0 0 10px 0;
}
p {
    marging: 0;
}
footer {
    border: 1px solid red;
}

效果如圖：

但這并不是我們想要的，我們并不想讓footer 被提到上邊。
浮動元素脫離了原來的文檔流，不受父元素的控制。如果我們想讓父元素還包含浮動的子元素，怎么做呢？
有三種方法：

只需要在 section 加上這個樣式：

section {
    overflow: hidden;
    ...
}

現在效果如圖：

實際上，overflow: hidden 聲明凱真正用途是防止包含元素被超大內容撐大。也就是說應用上這個之后，包含元素（父元素）會保持其設定的寬度，如果子元素過大，會被截掉。

第二種方法是讓父元素和子元素同時浮動。

section {
    float: left;
    width: 100%;
    border: 1px solid blue;
}
img {
    float: left;
}
footer {
    border: 1px solid red;
    clear: left;
}

浮動section 后，不管其子元素是否浮動，都會被包圍。因此需要用 width: 100% 讓section 與瀏覽器同寬。由于section 也浮動，所以footer 會往它旁邊擠，這時需要使用 clear: left 以保證不會被提升到浮動的元素旁邊。

第三種方法是給父元素添加一個非浮動的子元素，然后清除該子元素。

這種方式可以生效是因為父元素一定會包圍非浮動子元素，且清除會讓這個子元素處于最下。

這里我們使用神奇的 clearfix 規則：

.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
    }

這個 clearfix 規則最早是由程序員 Tony Aslett 發明的，它只添加了一個清除的包含句點作為非浮動元素（必須有內容，句點是最小的內容）。規則中其他生命是為了確保這個偽元素沒有高度，而且不可見。

after 會在元素內容（而不是元素后插入一個偽元素）
使用clear: both 意味著 section 中新增的子元素會被清除左右浮動元素。

我們看了三種方法圍住浮動元素的方式。

那如果沒有父元素，如果清除浮動呢？

比如下邊這個例子：

    
    
This text sits next to the image and because the text extends below the bottom of the image, the next image positions itself correctly under the previous image.
    
    
This text is short, so the next image can float up beside this one.
    
    
Because the previous image"s text does not extend below it, this image and text move up next to the previous image. This problem can be solved by the use of the clear property.

樣式如下：

section {
    width:300px; b
    order:1px solid red;
}
img {
    float:left; 
    margin:0 4px 4px 0;
}
p {
    font-family:helvetica, arial, sans-serif; 
    margin:0 0 5px 0;
}

效果如圖所示：

由于第二張圖下方有空間，所以第三張圖及說明文字會上浮到第二張圖片右側，這并不是我們想要的結果。

我們想要的效果是如下圖這樣：

那怎么實現呢？ 還是應用 clearfix 規則。為每個段落加上clearfix 類。通過clearfix類清除元素后，布局就是我們希望的了。

這一篇主要介紹了盒子模型，浮動和清除。下一篇介紹css 布局。

最后，感謝女朋友支持。