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

這是CSS設(shè)計(jì)指南的讀書筆記，用于加深學(xué)習(xí)效果。

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

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

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

position：控制頁(yè)面上元素的位置關(guān)系

display：控制元素是堆疊、并排還是不在頁(yè)面出現(xiàn)

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

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

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

內(nèi)邊距(padding)。可以甚至盒子內(nèi)容區(qū)與邊框的間距

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

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

CSS為邊框、內(nèi)邊距和外邊距分別規(guī)定了簡(jiǎn)寫屬性，每個(gè)簡(jiǎn)寫聲明中，屬性值得順序都是上、右、下、左。

比如：

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

使用簡(jiǎn)寫則為這樣：

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

如果有一個(gè)值沒(méi)寫，那么則使用對(duì)邊的值。

比如：

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

如果只寫一個(gè)值，則4個(gè)邊都取這個(gè)值。

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

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

{
    border: 2px dashed red;
}

混合使用三種粒度的簡(jiǎn)寫屬性達(dá)成設(shè)計(jì)目標(biāo)是很常見的。比如，想為盒子的上邊和下邊添加4像素的紅色邊框，為左邊添加1像素寬的紅色邊框，而右邊沒(méi)有。可以這么寫：

{border: 4px solid red;} /* 先給4條邊設(shè)置相同的樣式*/
{border-left-width: 1px;} /* 修改左邊框?qū)挾?/
{border-right: none;} /*移出右邊框*/

border 有三個(gè)相關(guān)屬性。

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

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

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

內(nèi)邊距是盒子內(nèi)容區(qū)與盒子邊框之間的距離。

上圖的樣式為：

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

可以看到在沒(méi)有設(shè)定內(nèi)邊距的情況下，內(nèi)容緊挨著邊框。

設(shè)定邊框后：

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

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

內(nèi)邊距在盒子的內(nèi)部，所以也會(huì)取得盒子背景。也就是說(shuō)，多出來(lái)的內(nèi)邊距并沒(méi)有擠壓文本內(nèi)容，實(shí)際是加在了聲明的盒子寬度之上。

上圖的例子中，第一組是默認(rèn)情況，第二組是在第一組基礎(chǔ)上添加了邊框，第三組是把第二組的外邊距設(shè)置為了0，標(biāo)題和段落全緊挨在一起了。

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

* {margin: 0; padding: 0;}

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

比如下邊這個(gè)樣式：

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

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

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

如果沒(méi)有顯式的設(shè)置元素的 width 屬性，我們就稱這個(gè)盒子沒(méi)有寬度。
如果沒(méi)有設(shè)定 width， 那么這個(gè)屬性的默認(rèn)值是 auto，會(huì)讓元素的寬度擴(kuò)展到與父元素同寬。

我們看個(gè)例子?：

 這個(gè)元素沒(méi)有設(shè)置寬度

設(shè)置樣式：

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

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

可以看到，不給段落設(shè)置寬度，段落會(huì)填滿 body 元素。

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

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

這時(shí)段落內(nèi)容區(qū)域變成了 288像素（我把瀏覽器寬度手動(dòng)調(diào)成了400px，400-(20+6+30)x2）。

結(jié)論：沒(méi)有寬度的元素始終會(huì)擴(kuò)展到填滿其父元素的寬度為止。添加水平邊框、內(nèi)邊距和外邊距會(huì)導(dǎo)致內(nèi)容寬度減少，減少量等于水平邊框、內(nèi)邊距和外邊距的和。

還是上邊的例子，我們先把外邊距去掉，固定寬度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;
}

可以看到，這時(shí)總寬度達(dá)到了512像素（30+6+20+400+20+6+30=512）

結(jié)論: 為設(shè)定了寬度的盒子添加邊框、內(nèi)邊距和外邊距，會(huì)導(dǎo)致盒子更寬。實(shí)際上盒子的 width 屬性設(shè)定的只是盒子內(nèi)容區(qū)的寬度，而非盒子整體的寬度

css 設(shè)計(jì) float（浮動(dòng)）屬性的主要目的是為了實(shí)現(xiàn)文本繞排圖片的效果，這個(gè)屬性也是創(chuàng)建多欄布局最簡(jiǎn)單的方式。
我們先看一個(gè)例子：

..the paragraph text...

css 規(guī)則如下。

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

這個(gè)例子的樣式如圖所示：

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

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

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

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

看下這個(gè)例子：

    
    
It"s fun to float.

應(yīng)用樣式如下：

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

效果如圖：

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

只需要在 section 加上這個(gè)樣式：

section {
    overflow: hidden;
    ...
}

現(xiàn)在效果如圖：

實(shí)際上，overflow: hidden 聲明凱真正用途是防止包含元素被超大內(nèi)容撐大。也就是說(shuō)應(yīng)用上這個(gè)之后，包含元素（父元素）會(huì)保持其設(shè)定的寬度，如果子元素過(guò)大，會(huì)被截掉。

第二種方法是讓父元素和子元素同時(shí)浮動(dòng)。

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

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

第三種方法是給父元素添加一個(gè)非浮動(dòng)的子元素，然后清除該子元素。

這種方式可以生效是因?yàn)楦冈匾欢〞?huì)包圍非浮動(dòng)子元素，且清除會(huì)讓這個(gè)子元素處于最下。

這里我們使用神奇的 clearfix 規(guī)則：

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

這個(gè) clearfix 規(guī)則最早是由程序員 Tony Aslett 發(fā)明的，它只添加了一個(gè)清除的包含句點(diǎn)作為非浮動(dòng)元素（必須有內(nèi)容，句點(diǎn)是最小的內(nèi)容）。規(guī)則中其他生命是為了確保這個(gè)偽元素沒(méi)有高度，而且不可見。

after 會(huì)在元素內(nèi)容（而不是元素后插入一個(gè)偽元素）
使用clear: both 意味著 section 中新增的子元素會(huì)被清除左右浮動(dòng)元素。

我們看了三種方法圍住浮動(dòng)元素的方式。

那如果沒(méi)有父元素，如果清除浮動(dòng)呢？

比如下邊這個(gè)例子：

    
    
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;
}

效果如圖所示：

由于第二張圖下方有空間，所以第三張圖及說(shuō)明文字會(huì)上浮到第二張圖片右側(cè)，這并不是我們想要的結(jié)果。

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

那怎么實(shí)現(xiàn)呢？ 還是應(yīng)用 clearfix 規(guī)則。為每個(gè)段落加上clearfix 類。通過(guò)clearfix類清除元素后，布局就是我們希望的了。

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

最后，感謝女朋友支持。