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

• 第一次電話面試，面試哥哥問我你都知道哪些去除浮動的辦法？
  我是這樣回答的「有兩種方法，一種是在需要去除浮動的元素上使用「clear：both」；另一種是在浮動元素的父元素上使用」overflow:hidden"。
  說實話當時說第二種方法時，我並沒有實踐過，只是看過，然後含含糊糊的說了。

• 第二次面試，也問到了這個問題，但是由於第一次電面的教訓，我回去就看了看書，《css設計指南》裡面有專門的一章講去除浮動的幾種方法，可是時間緊，我只是看了書一遍，並沒有用手敲過。 所以問的時候，我就1234羅列啦一下。 #3、浮動父元素
  4、在浮動元素的後面添加一個去除浮動的元素。肯定是用浮動實現的，那麼他肯定不能用overflow:hidden;這個，應為萬一這個當行欄有子菜單，那不就看不見了麼,，怎麼解決呢」
  我當時回答的是在浮動元素的後面加入一個去浮動的元素，那位面試姊姊也沒有說對錯，
  到底是對是錯，還是需要自己做一個導航，就知道了。
  
  #之前在這裡寫過一篇關於浮動原理的筆記，今天呢，我就再寫一篇筆記，有關去除浮動，內容來自於《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還有一個作用，就是它能可靠的迫使父元素包含其浮動的子元素。 但是，帶來的後果就是字內容一旦超出設定寬度就會看不見。

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

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

這三種方法都利用父元素進而實現，圍住浮動的子元素。
分析這三個方法：
1、不能在下拉選單的頂層元素上套用overflow:hidden；否則作為其子元素的下拉式選單就不會顯示啦。
2、不能對已經自動外邊距居中的元素使用浮動父元素技術，否則他就不會再居中。
但是如果某些場合沒有父元素時呢？
我一定會說，再加個唄，由不費事，但是這樣會增加遍歷深度，
如果某個元素既希望自身受到浮動元素影響，又不希望他之後的元素受到這個浮動元素影響，可以在這個元素的內部添加一個塊級元素，然後再為這個塊級元素清除浮動，還有一點需要注意，這個元素千萬不要自己多餘設置個高度，否則效果不會顯現出來，希望看到這篇文章的人可親測。

【相關推薦】

1. 免費css線上影片教學

2. css線上手冊

#3. php.cn獨孤九賤（2）－css影片教學

#

以上是css中浮動的影響以及去除浮動的方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！