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