方法1:给予父盒子足够的高度,即将浮动的元素“关”在父盒子内
此方法过于笨重。(给盒子加高度很麻烦,而且父盒子的高度又要根据内容而变化。)
方法2:给父盒子加:clear:left/right 表示清除别其他盒子对自己内部元素的影响。
*:但是此种方法下,margin失效了。两个div之间没有任何间隙了。
方法3:“隔墙法”,在两个父盒子中间加一个元素(例如<h1></h1>)那么h1就变成一堵“墙”。
*隔墙法虽然好用但是第一个div还是没有高度。
方法4:“内墙法”。即在两个父盒子其中之一建立一堵“墙”。
*此种方法下有“内墙”的盒子能够被其内容撑出高度了,而且也能隔离其后面的盒子中脱标的元素。
方法5:在父盒子内,“修”一堵(没有高的)clear:both的“墙”,那么父盒子就能被浮动的有高度的元素“撑出”高度。
方法5尤其实用,因为在很多情况下我们都需要让父盒子的高度随内容的多少而变化(自适应)。
方法6:overflow:hidden;将溢出盒子的内容都隐藏。
具有overflow:hidden属性的父盒子可以被儿子撑出高度。此种方法下,margin也有效