本文最初發表于部落格園，并在GitHub上持續更新。以下是正文。
文本主要内容
- 标準文檔流
- 标準文檔流的特性
- 行内元素和塊級元素
- 行内元素和塊級元素的互相轉換
- 浮動的性質
- 浮動的清除
- 浏覽器的相容性問題
- 浮動中margin相關
- 關于margin的IE6相容問題
宏觀地講，我們的web頁面和photoshop等設計軟體有本質的差別：web頁面的制作，是個“流”，必須從上而下，像“織毛衣”。而設計軟體，想往哪裡畫個東西，都能畫。
（1）空白折疊現象：
無論多少個空格、換行、tab，都會折疊為一個空格。
比如，如果我們想讓img标簽之間沒有空隙，必須緊密連接配接：
<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />
（2）高矮不齊，底邊對齊：
舉例如下：
（3）自動換行，一行寫不滿，換行寫。
學習的初期，我們就要知道，标準文檔流等級森嚴。标簽分為兩種等級：
- 行内元素
- 塊級元素
我們可以舉一個例子，看看塊級元素和行内元素的差別：
上圖中可以看到，
h1
标簽是塊級元素，占據了整行，
span
标簽是行内元素，隻占據内容這一部分。
現在我們嘗試給兩個标簽設定寬高。效果如下：
上圖中，我們嘗試給兩個标簽設定寬高，但發現，寬高屬性隻對塊級元素
h1
生效。于是我們可以做出如下總結。
行内元素和塊級元素的差別：（非常重要）
行内元素：
- 與其他行内元素并排；
- 不能設定寬、高。預設的寬度，就是文字的寬度。
塊級元素：
- 霸占一行，不能與其他任何元素并列；
- 能接受寬、高。如果不設定寬度，那麼寬度将預設變為父親的100%。
行内元素和塊級元素的分類：
在以前的HTML知識中，我們已經将标簽分過類，當時分為了：文本級、容器級。
從HTML的角度來講，标簽分為：
- 文本級标簽：p、span、a、b、i、u、em。
- 容器級标簽：div、h系列、li、dt、dd。
PS：為甚麼說p是文本級标簽呢？因為p裡面隻能放文字&圖檔&表單元素，p裡面不能放h和ul，p裡面也不能放p。
現在，從CSS的角度講，CSS的分類和上面的很像，就p不一樣：
- 行内元素：除了p之外，所有的文本級标簽，都是行内元素。p是個文本級，但是是個塊級元素。
- 塊級元素：所有的容器級标簽都是塊級元素，還有p标簽。
我們把上面的分類畫一個圖，即可一目了然：
我們可以通過
display
屬性将塊級元素和行内元素進行互相轉換。display即“顯示模式”。
塊級元素可以轉換為行内元素：
一旦，給一個塊級元素（比如div）設定：
display: inline;
那麼，這個标簽将立即變為行内元素，此時它和一個span無異。inline就是“行内”。也就是說：
- 此時這個div不能設定寬度、高度；
- 此時這個div可以和别人并排了。
行内元素轉換為塊級元素：
同樣的道理，一旦給一個行内元素（比如span）設定：
display: block;
那麼，這個标簽将立即變為塊級元素，此時它和一個div無異。block”是“塊”的意思。也就是說：
- 此時這個span能夠設定寬度、高度
- 此時這個span必須霸占一行了，别人無法和他并排
- 如果不設定寬度，将撐滿父親
标準流裡面的限制非常多，導緻很多頁面效果無法實作。如果我們現在就要并排、并且就要設定寬高，那該怎麼辦呢？辦法是：移民！脫離标準流！
css中一共有三種手段，使一個元素脫離标準文檔流：
- （1）浮動
- （2）絕對定位
- （3）固定定位
這便引出我們今天要講的内容：浮動。
浮動是css裡面布局用的最多的屬性。
現在有兩個div，分别設定寬高。我們知道，它們的效果如下：
此時，如果給這兩個div增加一個浮動屬性，比如
float: left;
，效果如下：
這就達到了浮動的效果。此時，兩個元素并排了，并且兩個元素都能夠設定寬度、高度了（這在上一段的标準流中，不能實作）。
浮動想學好，一定要知道三個性質。接下來講一講。
性質1：浮動的元素脫标
脫标即脫離标準流。我們來看幾個例子。
證明1：
上圖中，在預設情況下，兩個div标簽是上下進行排列的。現在由于float屬性讓上圖中的第一個
<div>
标簽出現了浮動，于是這個标簽在另外一個層面上進行排列。而第二個
<div>
還在自己的層面上遵從标準流進行排列。
證明2：
上圖中，span标簽在标準流中，是不能設定寬高的（因為是行内元素）。但是，一旦設定為浮動之後，即使不轉成塊級元素，也能夠設定寬高了。
是以能夠證明一件事：一旦一個元素浮動了，那麼，将能夠并排了，并且能夠設定寬高了。無論它原來是個div還是個span。所有标簽，浮動之後，已經不區分行内、塊級了。
性質2：浮動的元素互相貼靠
我們來看一個例子就明白了。
我們給三個div均設定了
float: left;
屬性之後，然後設定寬高。當改變浏覽器視窗大小時，可以看到div的貼靠效果：
上圖顯示，3号如果有足夠空間，那麼就會靠着2号。如果沒有足夠的空間，那麼會靠着1号大哥。
如果沒有足夠的空間靠着1号大哥，3号自己去貼左牆。
不過3号自己去貼牆的時候，注意：
上圖顯示，3号貼左牆的時候，并不會往1号裡面擠。
同樣，float還有一個屬性值是
right
，這個和屬性值
left
是對稱的。
性質3：浮動的元素有“字圍”效果
來看一張圖就明白了。我們讓div浮動，p不浮動。
上圖中，我們發現：div擋住了p，但不會擋住p中的文字，形成“字圍”效果。
總結：标準流中的文字不會被浮動的盒子遮擋住。（文字就像水一樣）
關于浮動我們要強調一點，浮動這個東西，為避免混亂，我們在初期一定要遵循一個原則：永遠不是一個東西單獨浮動，浮動都是一起浮動，要浮動，大家都浮動。
性質4：收縮
收縮：一個浮動的元素，如果沒有設定width，那麼将自動收縮為内容的寬度（這點非常像行内元素）。
上圖中，div本身是塊級元素，如果不設定width，它會單獨霸占整行；但是，設定div浮動後，它會收縮
浮動的補充（做網站時注意）
上圖所示，将para1和para2設定為浮動，它們是div的兒子。此時para1+para2的寬度小于div的寬度。效果如上圖所示。可如果設定para1+para2的寬度大于div的寬度，我們會發現，para2掉下來了：
布置一個作業
布置一個作業，要求實作下面的效果：
為實作上方效果，代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
width: 970px;
height: 103px;
/*居中。這個語句的意思是：居中：*/
margin: 0 auto;
}
.header .logo{
float: left;
width: 277px;
height: 103px;
background-color: red;
}
.header .language{
float: right;
width: 137px;
height: 49px;
background-color: green;
margin-bottom: 8px;
}
.header .nav{
float: right;
width: 679px;
height: 46px;
background-color: green;
}
.content{
width: 970px;
height: 435px;
/*居中，這個語句今天沒講，你照抄，就是居中：*/
margin: 0 auto;
margin-top: 10px;
}
.content .banner{
float: left;
width: 310px;
height: 435px;
background-color: gold;
margin-right: 10px;
}
.content .rightPart{
float: left;
width: 650px;
height: 435px;
}
.content .rightPart .main{
width: 650px;
height: 400px;
margin-bottom: 10px;
}
.content .rightPart .links{
width: 650px;
height: 25px;
background-color: blue;
}
.content .rightPart .main .news{
float: left;
width: 450px;
height: 400px;
}
.content .rightPart .main .hotpic{
float: left;
width: 190px;
height: 400px;
background-color: purple;
margin-left: 10px;
}
.content .rightPart .main .news .news1{
width: 450px;
height: 240px;
background-color: skyblue;
margin-bottom: 10px;
}
.content .rightPart .main .news .news2{
width: 450px;
height: 110px;
background-color: skyblue;
margin-bottom: 10px;
}
.content .rightPart .main .news .news3{
width: 450px;
height: 30px;
background-color: skyblue;
}
.footer{
width: 970px;
height: 35px;
background-color: pink;
/*沒學，就是居中：*/
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- 頭部 -->
<div class="header">
<div class="logo">logo</div>
<div class="language">語言選擇</div>
<div class="nav">導覽列</div>
</div>
<!-- 主要内容 -->
<div class="content">
<div class="banner">大廣告</div>
<div class="rightPart">
<div class="main">
<div class="news">
<div class="news1"></div>
<div class="news2"></div>
<div class="news3"></div>
</div>
<div class="hotpic"></div>
</div>
<div class="links"></div>
</div>
</div>
<!-- 頁尾 -->
<div class="footer"></div>
</body>
</html>
其實，這個頁面的布局是下面這個網站：
這裡所說的清除浮動，指的是清除浮動與浮動之間的影響。
前言
通過上面這個例子，我們發現，此例中的網頁就是通過浮動實作并排的。
比如說一個網頁有header、content、footer這三部分。就拿content部分來舉例，如果設定content的兒子為浮動，但是，這個兒子又是一個全新的标準流，于是兒子的兒子仍然在标準流裡。
從學習浮動的第一天起，我們就要明白，浮動有開始，就要有清除。我們先來做個實驗。
下面這個例子，有兩個塊級元素div，div沒有任何屬性，每個div裡有li，效果如下：
上面這個例子很簡單。可如果我們給裡面的
<li>
标簽加浮動。效果卻成了下面這個樣子：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
}
li{
float: left;
width: 100px;
height: 20px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>生命壹号1</li>
<li>生命壹号2</li>
<li>生命壹号3</li>
<li>生命壹号4</li>
</ul>
</div>
<div class="box2">
<ul>
<li>許嵩1</li>
<li>許嵩2</li>
<li>許嵩3</li>
<li>許嵩4</li>
</ul>
</div>
</body>
</html>
效果如下：
上圖中，我們發現：第二組中的第1個li，去貼靠第一組中的最後一個li了（我們本以為這些li會分成兩排）。
這便引出我們要講的：清除浮動的第一種方式。
那該怎麼解決呢？
方法1：給浮動元素的祖先元素加高度
造成前言中這個現象的根本原因是：li的父親div沒有設定高度，導緻這兩個div的高度均為0px（我們可以通過網頁的審查元素進行檢視）。div的高度為零，導緻不能給自己浮動的孩子，撐起一個容器。
撐不起一個容器，導緻自己的孩子沒辦法在自己的内部進行正确的浮動。
好，現在就算給這個div設定高度，可如果div自己的高度小于孩子的高度，也會出現不正常的現象：
給div設定一個正确的合适的高度（至少保證高度大于兒子的高度），就可以看到正确的現象：
總結：
如果一個元素要浮動，那麼它的祖先元素一定要有高度。
有高度的盒子，才能關住浮動。（記住這句過來人的經驗之語）
隻要浮動在一個有高度的盒子中，那麼這個浮動就不會影響後面的浮動元素。是以就是清除浮動帶來的影響了。
方法2：clear:both;
網頁制作中，高度height其實很少出現。為什麼？因為能被内容撐高！也就是說，剛剛我們講解的方法1，工作中用得很少。
那麼，能不能不寫height，也把浮動清除了呢？也讓浮動之間，互不影響呢？
這個時候，我們可以使用
clear:both;
這個屬性。如下：
clear:both;
clear就是清除，both指的是左浮動、右浮動都要清除。
clear:both
的意思就是：不允許左側和右側有浮動對象。
這種方法有一個非常大的、緻命的問題，它所在的标簽，margin屬性失效了。讀者可以試試看。
margin失效的本質原因是：上圖中的box1和box2，高度為零。
方法3：隔牆法
上面這個例子中，為了防止第二個div貼靠到第二個div，我們可以在這兩個div中間用一個新的div隔開，然後給這個新的div設定
clear: both;
屬性；同時，既然這個新的div無法設定margin屬性，我們可以給它設定height，以達到margin的效果（曲線救國）。這便是隔牆法。
我們看看例子效果就知道了：
上圖這個例子就是隔牆法。
内牆法：
近些年，有演化出了“内牆法”：
上面這個圖非常重要，當作内牆法的公式，先記下來。
為了講内牆法，我們先記住一句重要的話：一個父親是不能被浮動的兒子撐出高度的。舉例如下：
（1）我們在一個div裡放一個有寬高的p，效果如下：（很簡單）
（2）可如果在此基礎之上，給p設定浮動，卻發現父親div沒有高度了：
（3）此時，我麼可以在div的裡面放一個div（作為内牆），就可以讓父親div恢複高度：
于是，我們采用内牆法解決前言中的問題：
與外牆法相比，内牆法的優勢（本質差別）在于：内牆法可以給它所在的家撐出寬度（讓box1有高）。即：box1的高度可以自适應内容。
而外牆法，雖然一道牆可以把兩個div隔開，但是這兩個div沒有高，也就是說，無法wrap_content。
清除浮動方法4：overflow:hidden;
我們可以使用如下屬性：
overflow:hidden;
overflow即“溢出”， hidden即“隐藏”。這個屬性的意思是“溢出隐藏”。顧名思義：所有溢出邊框的内容，都要隐藏掉。如下：
上圖顯示，
overflow:hidden;
的本意是清除溢出到盒子外面的文字。但是，前端開發工程師發現了，它能做偏方。如下：
一個父親不能被自己浮動的兒子，撐出高度。但是，隻要給父親加上
overflow:hidden
; 那麼，父親就能被兒子撐出高了。這是一個偏方。
舉個例子：
那麼對于前言中的例子，我們同樣可以使用這一屬性：
浮動清除的總結
我們在上一段講了四種清除浮動的方法，本段來進行一個總結。
浮動的元素，隻能被有高度的盒子關住。 也就是說，如果盒子内部有浮動，這個盒子有高，那麼妥妥的，浮動不會互相影響。
1、加高法
工作上，我們絕對不會給所有的盒子加高度，這是因為麻煩，并且不能适應頁面的快速變化。
<div> //設定height
<p></p>
<p></p>
<p></p>
</div>
<div> //設定height
<p></p>
<p></p>
<p></p>
</div>
2、 clear:both;
clear:both;
最簡單的清除浮動的方法，就是給盒子增加clear:both；表示自己的内部元素，不受其他盒子的影響。
<div>
<p></p>
<p></p>
<p></p>
</div>
<div> //clear:both;
<p></p>
<p></p>
<p></p>
</div>
浮動确實被清除了，不會互相影響了。但是有一個問題，就是margin失效。兩個div之間，沒有任何的間隙了。
3、隔牆法
在兩部分浮動元素中間，建一個牆。隔開兩部分浮動，讓後面的浮動元素，不去追前面的浮動元素。
牆用自己的身體當做了間隙。
<div>
<p></p>
<p></p>
<p></p>
</div>
<div class="cl h10"></div>
<div>
<p></p>
<p></p>
<p></p>
</div>
我們發現，隔牆法好用，但是第一個div，還是沒有高度。如果我們現在想讓第一個div，自動根據自己的兒子撐出高度，我們就要想一些“小伎倆”。
<div>
<p></p>
<p></p>
<p></p>
<div class="cl h10"></div>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
内牆法的優點就是，不僅僅能夠讓後部分的p不去追前部分的p了，并且能把第一個div撐出高度。這樣，這個div的背景、邊框就能夠根據p的高度來撐開了。
4、 overflow:hidden;
overflow:hidden;
這個屬性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我們發現這個東西能夠用于浮動的清除。
我們知道，一個父親，不能被自己浮動的兒子撐出高度，但是，如果這個父親加上了overflow:hidden；那麼這個父親就能夠被浮動的兒子撐出高度了。這個現象，不能解釋，就是浏覽器的偏方。
并且,overflow:hidden;能夠讓margin生效。
清除浮動的例子：
我們現在舉個例子，要求實作下圖中無序清單部分的效果：
對比一下我們講的四種清除浮動的方法。如果用外牆法，ul中不能插入div标簽，因為ul中隻能插入li，如果插入li的牆，會浪費語義。如果用内牆法，不美觀。綜合對比，還是用第四種方法來實作吧，這會讓标簽顯得極其幹淨整潔：
上方代碼中，如果沒有加
overflow:hidden;
，那麼第二行的li會緊跟着第一行li的後面。
講一下上述知識點涉及到的浏覽器相容問題。
相容性1（微型盒子）
相容性的第一條：IE6不支援小于12px的盒子，任何小于12px的盒子，在IE6中看都大。即：IE 6不支援微型盒子。
舉個例子。我們設定一個height為 5px 、寬度為 200px的盒子，看下在IE 8和 IE 6中的顯示效果：
解決辦法很簡單，就是将盒子的字号大小，設定為小于盒子的高，比如，如果盒子的高為5px，那就把font-size設定為0px(0px < 5px)。如下：
height: 5px;
_font-size: 0px;
我們現在介紹一下浏覽器hack。hack就是“黑客”，就是使用浏覽器提供的後門，針對某一種浏覽器做相容。
IE6留了一個後門：隻要給css屬性之前，加上下劃線，這個屬性就是IE6的專有屬性。
比如說，我們給背景顔色這個屬性加上下劃線，就變成了
_background-color: green;
。效果如下：
于是乎，為了解決微型盒子（即height小于12px）的問題，正确寫法：（注意不要忘記下劃線）
height: 10px;
_font-size:0;
相容性2
相容性的第二條：IE6不支援用
overflow:hidden;
來清除浮動。
解決辦法，以毒攻毒。追加一條：
_zoom:1;
完整寫法：
overflow: hidden;
_zoom:1;
實際上，
_zoom:1;
能夠觸發浏覽器hasLayout機制。這個機制，不要深究了，因為隻有IE6有。我們隻需要讓IE6好用，具體的實作機制，可以自行查閱。
需要強調的是，
overflow:hidden;
的本意，就是讓溢出盒子的border的内容隐藏，這個功能是IE6相容的。不相容的是
overflow:hidden;
清除浮動的時候。
我們剛才學習的兩個IE6的相容問題，都是通過多寫一條hack來解決的，這個我們稱為伴生屬性，即兩個屬性，要寫一起寫。
屬性1：
height:6px;
_font-size:0;
屬性2：
overflow:hidden;
_zoom:1;
margin相關
我們來講一下浮動中和margin相關的知識。
margin塌陷/margin重疊
标準文檔流中，豎直方向的margin不疊加，取較大的值**作為margin(水準方向的margin是可以疊加的，即水準方向沒有塌陷現象)。如下圖所示：
如果不在标準流，比如盒子都浮動了，那麼兩個盒子之間是沒有塌陷現象的。
盒子居中 margin:0 auto;
margin:0 auto;
margin的值可以為auto，表示自動。當left、right兩個方向都是auto的時候，盒子居中了：
margin-left: auto;
margin-right: auto;
盒子居中的簡寫為：
margin:0 auto;
對上方代碼的了解：上下的margin為0，左右的margin都盡可能的大，于是就居中了。
注意：
- （1）隻有标準流的盒子，才能使用
margin:0 auto;
- （2）使用
margin:0 auto;
- （3）
margin:0 auto;
text-align:center;
對上面的第三條總結一下：（非常重要）
margin:0 auto; //讓這個div自己在大容器中的水準方向上居中。
text-align: center; //讓這個div内部的文本居中。
順便普及一下知識，text-align還有：
text-align:left; //沒啥用，因為預設居左
text-align:right; //文本居右
善于使用父親的padding，而不是兒子的margin
我們來看一個奇怪的現象。現在有下面這樣一個結構：（div中放一個p）
<div>
<p></p>
</div>
上面的結構中，我們嘗試通過給兒子
p
一個
margin-top:50px;
的屬性，讓其與父親保持50px的上邊距。結果卻看到了下面的奇怪的現象：
此時我們給父親div加一個border屬性，就正常了：
如果父親沒有border，那麼兒子的margin實際上踹的是“流”，踹的是這“行”。是以，父親整體也掉下來了。
margin這個屬性，本質上描述的是兄弟和兄弟之間的距離； 最好不要用這個marign表達父子之間的距離。
是以，如果要表達父子之間的距離，我們一定要善于使用父親的padding，而不是兒子的margin。
IE6的雙倍margin的bug：
當出現連續浮動的元素，攜帶與浮動方向相同的margin時，隊首的元素，會雙倍marign。
<ul>
<li></li>
<li></li>
<li></li>
</ul>
解決方案：
（1）使浮動的方向和margin的方向，相反。
是以，你就會發現，我們特别喜歡，浮動的方向和margin的方向相反。并且，前端開發工程師，把這個當做習慣了。
float: left;
margin-right: 40px;
（2）使用hack：（沒必要，别慣着這個IE6）
單獨給隊首的元素，寫一個一半的margin：
<li class="no1"></li>
ul li.no1{
_margin-left:20px;
}
PS：雙倍margin的問題，面試經常問哦。
IE6的3px bug
解決辦法：不用管，因為根本就不允許用兒子踹父親（即描述父子之間的距離，請用padding，而不是margin）。是以，如果你出現了3px bug，說明你的代碼不标準。
IE6，千萬不要跟他死坑、較勁，它不配。 格調要高，我們講IE6的相容性問題，就是為了增加面試的成功率，不是為了成為IE6的專家。
Fireworks和others
Fireworks
fireworks是Adobe公司的一個設計軟體。功能非常多，我們以後用啥講啥。Fireworks的預設檔案格式是png。
标尺的快捷鍵：Ctrl + Alt+ R
others
首行縮進兩個漢字：
text-indent: 2em;
上方屬性中，機關比較奇怪，叫做em，em就是漢字的一個寬度。indent的意思是縮進。
我的公衆号
想學習代碼之外的技能？不妨關注我的微信公衆号：千古壹号（id：
qianguyihao
）。
掃一掃，你将發現另一個全新的世界，而這将是一場美麗的意外：