清楚浮动方法总结----web前端

方法1：给予父盒子足够的高度，即将浮动的元素“关”在父盒子内

此方法过于笨重。（给盒子加高度很麻烦，而且父盒子的高度又要根据内容而变化。）

方法2：给父盒子加：clear:left/right 表示清除别其他盒子对自己内部元素的影响。

*：但是此种方法下，margin失效了。两个div之间没有任何间隙了。



方法3：“隔墙法”，在两个父盒子中间加一个元素(例如<h1></h1>)那么h1就变成一堵“墙”。

*隔墙法虽然好用但是第一个div还是没有高度。

方法4：“内墙法”。即在两个父盒子其中之一建立一堵“墙”。

*此种方法下有“内墙”的盒子能够被其内容撑出高度了，而且也能隔离其后面的盒子中脱标的元素。

方法5：在父盒子内，“修”一堵(没有高的)clear:both的“墙”，那么父盒子就能被浮动的有高度的元素“撑出”高度。

方法5尤其实用，因为在很多情况下我们都需要让父盒子的高度随内容的多少而变化（自适应）。

方法6：overflow：hidden；将溢出盒子的内容都隐藏。

具有overflow：hidden属性的父盒子可以被儿子撑出高度。此种方法下，margin也有效