float是我們在左右布局中經常用到的標籤，在使用時引起的父容器塌陷問題總是令人非常頭疼。今天筆者就來詳細得寫寫解決父容器的塌陷問題都有哪些辦法，這些辦法的好處和壞處都又有哪些。
首先我們先寫乙個父容器塌陷問題。讓兩個div進行左浮動。
此時很明顯，父容器#all塌陷了。
出現問題的原因：
當給塊兒標籤加了float時，塊兒標籤就脫離了文件流，相當於往上走了一層樓，到了第二層樓，而此時他們的父容器仍然在一樓。我們也沒有給父容器設定固定的高度，父容器內此時等於沒有內容，所以才造成了塌陷。
給父容器#all固定他的高度。
當給父容器固定高度後，他的高度就不是靠裡面的內容撐開了，也就不會出現塌陷的問題。
讓父容器也進行浮動。
父容器塌陷的原因就是內容到了二樓，而父容器依然在一樓，沒有了內容將他的高度撐開。我們如果將父容器也進行浮動，讓他也到二樓，此時他們在同一樓，問題也就解決了。
這種方法的壞處：
會嚴重影響頁面下面的內容，下面的內容會向上移動，使你的頁面整體亂套。
例子：
第三種辦法（不推薦）
利用display:inline-block;（bfc規範）來解決。
這種辦法的壞處：
display:inline-block;是將父容器轉變成乙個內聯的塊兒，讓他同時具備內聯標籤與塊兒標籤的特性，會使後面的布局在父容器的後面排列，而不是下方，所以不推薦。
第四種辦法：（可以使用，但是不是第一選擇）
利用給父容器新增overflow:hiddent;（bfc規範）來解決。
這種辦法的壞處：
我們都知道overflow:hiddent;是溢位隱藏。所以如果父容器內有子元素想要溢位，那麼將會受到影響而無法溢位顯示，可以根據需求使用。
第五種辦法（可以使用，但不是第一選擇）
在父容器的最後加乙個空標籤div,然後對這個div新增清除浮動（此時這個div與裡面的內容是上下布局）：clear:both;，此時相當於解決了".one,.two"與".clear"的上下布局所引起浮動問題，讓第三個空標籤將父容器撐開。
例子：
這種辦法的壞處：
雖然這種辦法可以有效的解決父容器的塌陷問題，但是在寫頁面的過程中，我們會進行許多的左右布局，如果都用這種辦法解決父容器的塌陷問題，那麼將會寫許多這種沒有含義的**，耗時耗力，所以不推薦。
第六種辦法（強烈推薦，一般都這麼用）
利用after偽類來解決問題。#all:after
這個是第五種辦法的公升級強化版。我們已經知道了第五種辦法的原理，而他唯一存在的問題就是**量大，無語義化的標籤多。如果我們解決掉這個問題，那麼這個辦法將是目前最實用的辦法。
原理解釋：
:after是偽類選擇器，其含義是在這個標籤裡面的最後新增內容。
一. 先寫乙個：content:" ";—新增乙個空的內容，它此時等價於第五種辦法：在父容器的最後新增了乙個空的div。
二. 再寫乙個：clear:both;—給這個空的內容清除上下布局浮動引起的問題。
三. 最後寫乙個：display:block;—我們用content新增的這個空的內容預設是內聯的，如果不把它轉成乙個塊兒標籤，它就不會與父容器裡面的內容上下排列，clear：both；也就沒有了意義，問題也就解決不了。
在寫頁面的左右布局時，我們可以提前寫好這些東西，然後給需要的標籤進行新增class名，非常方便：
補充：
針對上下布局引起的浮動問題，給受影響的內容新增：clear:both;就好。
解決子容器全部浮動時父容器高度不能自動撐開的方法
剛入門 設計布局的開發者肯定會碰到這樣的問題，那就是當子容器全部浮動的時候，父容器的高度不能自動撐開。在我scneidmud們沒有為富容器設定邊框或背景的時候是看不到這個問題的，如下的 複製 如下 i m a son container scneidmud 程式設計客棧 left backgroun...
解決由設定邊距引起的「浮動滑移」問題
本文以三欄 固定寬度布局為例說明由設定邊距引起的 浮動滑移 問題怎麼解決。固定寬度布局必須將設定好每一欄的寬度。下面看乙個例子 這是左欄，寬150px 這是中欄，寬600px。本文以三欄 固定寬度布局為例說明由設定邊距引起的 浮動滑移 問題怎麼解決。這是右欄，寬210px 頁尾來啦 效果是這樣的 但...
浮動元素引起的問題和解決辦法
多個浮動的元素無法撐開父元素的寬度，父元素的高度可能會變成0。若浮動元素後面跟非浮動元素，非浮動元素會緊隨其後浮動起來。若浮動元素前面還有同級元素沒有浮動則會影響頁面結構。在最後乙個浮動元素後面新增屬性為clear both 的元素。123 45給父元素新增clear both 屬性的 after偽...