css中浮動(dòng)的影響以及去除浮動(dòng)的方法詳解

浮動(dòng)帶來的影響

現(xiàn)代瀏覽器的表現(xiàn)
放置兩個(gè)相鄰的行內(nèi)元素，如果設(shè)置第二個(gè)行內(nèi)元素為左浮動(dòng)，那么該行內(nèi)元素被設(shè)置浮動(dòng)后，其display會(huì)被修改為block；但是其大小會(huì)根據(jù)設(shè)置或其內(nèi)容的大小進(jìn)行表現(xiàn)。并不會(huì)占據(jù)整行的空間，其旁邊的行內(nèi)元素，就會(huì)在這一行的浮動(dòng)元素后面，并不會(huì)與浮動(dòng)元素平起平坐。
但是如果其旁邊是設(shè)定了寬度的行內(nèi)塊級(jí)元素，那么這個(gè)行內(nèi)塊級(jí)元素也會(huì)在浮動(dòng)元素后面。
如果其旁邊是塊級(jí)元素，那么這個(gè)塊級(jí)元素會(huì)占據(jù)該設(shè)置浮動(dòng)的行內(nèi)元素的空間。
如果說原因，我也說不上來。

在IE7及以前版本的ie瀏覽器
旁邊的行內(nèi)元素會(huì)在浮動(dòng)元素另起一行的下面，是不是更奇怪。

塊級(jí)元素浮動(dòng)后
瀏覽器會(huì)收回塊級(jí)元素原來占據(jù)的空間，原來緊跟其后的元素就會(huì)在空間允許的情況下，向上提升到與浮動(dòng)元素平起平坐。而設(shè)置浮動(dòng)的塊級(jí)元素本身就保持原來的位置，默默地看著他影響的元素改變。
該浮動(dòng)元素的父元素的邊框也會(huì)收縮至父元素內(nèi)沒有設(shè)置浮動(dòng)的子元素。

行內(nèi)元素浮動(dòng)后
其實(shí)這個(gè)貌似在我目前做的練習(xí)上沒有看過有這樣進(jìn)行設(shè)置的，但是他確實(shí)也帶來了不一樣的體驗(yàn)。

接下來就是圍住浮動(dòng)元素的幾種方法，及各個(gè)方法的適應(yīng)場合。

簡單的在html標(biāo)記中添加一個(gè)子元素，并給他應(yīng)用clear屬性。

 <section >
 <img src="7f0ff.png" alt="" style="float:left" />
 <p>it s fun to float</p>
 <p style="clear:left;"></p>
 </section>
 <footer>
 here is the footer element.
 </footer>

但是如果，我們特別不想添加這個(gè)純表現(xiàn)元素，可以采用css來添加這個(gè)清除元素。為section添加一個(gè)類：.clearfix

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

方法一：為父元素添加：overflow:hidden
這種方法強(qiáng)制父元素包圍浮動(dòng)的子元素。
實(shí)際上：overflow：hidden聲明的真正用途是防止包含元素被超大的內(nèi)容撐大。應(yīng)用overflow：hidden之后，包含元素依然保持其設(shè)定的寬度及高度，而超大的字內(nèi)容會(huì)被容器切掉。除此之外，overflow:hidden還有一個(gè)作用，即它能可靠的迫使父元素包含其浮動(dòng)的子元素。
但是，帶來的后果就是字內(nèi)容一旦超出設(shè)定寬度就會(huì)看不見。

方法二：同時(shí)浮動(dòng)父元素
其實(shí)這個(gè)對于整個(gè)網(wǎng)站布局并不算的上是清楚浮動(dòng)，只是使得父元素包圍住了浮動(dòng)的子元素，但是父元素浮動(dòng)雖然包圍住了浮動(dòng)子元素，但卻沒能解決父元素自身的浮動(dòng)對整個(gè)網(wǎng)站布局的影響，我看到有些網(wǎng)站的源碼還是會(huì)喜歡用這種方法，然后再在這個(gè)浮動(dòng)父元素的外面再包圍一個(gè)父元素，并為他設(shè)置寬度，高度，以保證不影響網(wǎng)頁中其他內(nèi)容的布局。

方法三：添加非浮動(dòng)的清除元素
就是給父元素的最后添加一個(gè)非浮動(dòng)的子元素，然后清除該子元素的浮動(dòng)。
然而在包含元素的最后添加子元素作為清除元素的方式有兩種。