css中浮動的影響以及去除浮動的方法詳解

浮動帶來的影響

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

在IE7及以前版本的ie瀏覽器
旁邊的行內元素會在浮動元素另起一行的下面，是不是更奇怪。

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

行內元素浮動后
其實這個貌似在我目前做的練習上沒有看過有這樣進行設置的，但是他確實也帶來了不一樣的體驗。

接下來就是圍住浮動元素的幾種方法，及各個方法的適應場合。

簡單的在html標記中添加一個子元素，并給他應用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>

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

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

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

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

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