清楚浮動方法總結----web前端

方法1：給予父盒子足夠的高度，即將浮動的元素“關”在父盒子內

             此方法過於笨重。（給盒子加高度很麻煩，而且父盒子的高度又要根據內容而變化。）

方法2：給父盒子加：clear:left/right 表示清除別其他盒子對自己內部元素的影響。

             *：但是此種方法下，margin失效了。兩個div之間沒有任何間隙了。

方法3：“隔牆法”，在兩個父盒子中間加一個元素(例如<h1></h1>)那麼h1就變成一堵“牆”。

             *隔牆法雖然好用但是第一個div還是沒有高度。

方法4：“內牆法”。即在兩個父盒子其中之一建立一堵“牆”。

             *此種方法下有“內牆”的盒子能夠被其內容撐出高度了，而且也能隔離其後面的盒子中脫標的元素。

方法5：在父盒子內，“修”一堵(沒有高的)clear:both的“牆”，那麼父盒子就能被浮動的有高度的元素“撐出”高度。

             方法5尤其實用，因為在很多情況下我們都需要讓父盒子的高度隨內容的多少而變化（自適應）。

方法6：overflow：hidden；將溢位盒子的內容都隱藏。

             具有overflow：hidden屬性的父盒子可以被兒子撐出高度。此種方法下，margin也有效