浮動是一個很有用的屬性，對于網頁布局，特殊效果的實現都很有用。
-
float的基本原理
float:left;//元素向左浮動
float:right;//元素向右浮動
div為塊級元素，所以每次新建都會另起一行。我們想象一下，這些未設置浮動的div盒子是在一個文檔流內（假想一個平面內），當設置div1為左浮動后，他就在另一個高于原文檔流的文檔流內（假想，在高于原來平面的一個平面內）,但是div1已經在最左側，所以左浮動，對于他沒有表現上的改變，div2的改變才是需要關注的，這么復雜的原理，瀏覽器肯定也會出現兼容性的問題。
【個人情緒】為什么一提到兼容性，IE6.7就出來。。因為那幾年，IE懈怠了，以為自己唯我獨尊，所以不更新內核，渲染出什么來了？？！！
明顯，IE6、7是不按照我上面寫的浮動機制渲染的，IE7以后及現代瀏覽器，都是按照我上面寫的浮動機制來的。
div1脫離文檔流，div2占據div1原有文檔流的位置。
細心一下，可以發(fā)現，div2上的文本內容被div1擠下去了，對于這種顯現，我假象了一下，文本內容與文本內容的父元素不是在一個文檔流內，而是高于父元素的文檔流，這樣就可以看到文本div2與浮動的div1在一個文檔流內。
div1與div2均設置左浮動后，二者就在一個文檔流內，所以就一個接著一個排著了。
【11月22日補充】
可見，元素div2設置浮動后，并沒有跑到div1的地方，是我以前誤以為設置浮動后，就會浮動于另一層，div2應該也可以浮動到div1的上面，其實不是，只是浮動到他所在的這一行的最左面。
float的應用
-
關于網頁布局
#box{
/height: 150px;/
width: 205px;
margin: 0 auto;
border: 5px solid green;
}
#qq{
height: 100px;
width: 100px;
background: red;
float: left;
}
#aa{
height: 100px;
width: 100px;
background: blue;
float: right;} #gg{ clear: both; //清除浮動 height: 50px; width: 205px; background: yellow; } //以上是<style></style>內的設置 <div id="box"> <div id="qq">div1</div> <div id="aa">div2</div> <div id="gg">div3</div> </div>
上圖是參照上面的代碼，最后生成的效果，div1與div2在box內分別左浮動與右浮動，box分別設置了寬度與高度，并且作了居中處理。div3也可以正常的在div1與div2之下。是我們希望的樣子。
但是下圖是在這樣的代碼下的效果
<style type="text/css">
#box{
border: 5px solid green;
}
#qq{
height: 100px;
width: 100px;
background: red;
float: left;
}
#aa{
height: 100px;
width: 100px;
background: blue;
float: right;
}
#gg{
height: 50px;
width: 205px;
background: yellow;
}
</style>
由于div1與div2均設置浮動，脫離文檔流后，div3占據了他們原來的位置。
父元素box沒有設置寬度，所以與body同寬，橫跨了整個頁面。因為里面有內容div3所以其高度同div3的高度。這也是未采取任何拯救措施的樣子。
現在，就來拯救一下，網頁布局
【第一步、去除浮動】
#gg{clear: both;}//both:為左右浮動都去。同理可以去除左浮動left，右浮動right
發(fā)現去除掉div1與div2的浮動后，div3則排在了div1與div2那一行的下面。而且外層div（即box）也將高度擴大了。
【第二步、設置外層div的寬度】
#box{width: 205px;}
發(fā)現已經初步達到，我們預期的效果。也證實了，子元素浮動的邊界是父元素。
【第三步、居中】
text-line
在
body標簽內進行text-align=center只會使body內所有有文本的盒子呢，文本內容居中。所以達不到，我們想要的效果。
margin
是盒子的外邊界，關于css盒子的概念，我會另寫一篇的。
#box{margin: 0 auto;}//前提設置了寬度width
-
首字符浮動
這是對文本內容的布局，我習慣在文本內容布局之前，對文本內容的padding與magin均清零。對段落p的行高，字體進行聲明，避免瀏覽器默認效果的不同，導致網頁不兼容。而且有時候，文本內容選擇的字體也會導致瀏覽器不兼容。
p{
margin: 0;
padding: 0;
height: 1rem;
line-height: 1.5rem;
}//默認標準化設置，你面瀏覽器的默認效果
#sap
{
padding: 0 15px;
float:left;
font-size: 4.5rem;
font-weight: bold;
line-height:4.45rem;
}
//html結構設置
<p>
<span id="sap">T</span>This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text.……This is some text.
</p>
我們希望的樣子
藍色部分是我標注的，每一個元素的設置都是有拿捏的。
來看一下失敗的例子。 -
未對p進行初始標準化設置
導致網頁效果的差異性
左面谷歌，右面IE -
使用了特殊字體
IE對該字體不是很兼容，發(fā)現該字體并沒有居中
左火狐，右IE
剛才我并沒有對字體進行標準化設置，網頁也會出現不一樣的效果，所以對字體也應該盡量的同一。
- line-height的設置
左：line-height：4.6rem，右：line-height：4.5rem
為什么會出現僅因為0.1rem的差距，就有這樣的差距呢？
首先，需要知道span標簽，為行內元素，不具備高寬的設置，其高是由內容決定。在單行，文本情況下，line-height的高度決定了其高度。而這樣也恰巧滿足了line-height=height。導致文本內容居中。然后在看下圖就明白了。
QQ截圖20141120133114.png
浮動元素右面的段落每一個的line-height為1.5rem，三行，為4.5rem。當浮動元素設置為4.6rem時必然會占用右面下一個段落的位置，導致左面出現空白。
歡迎補充與指正
