非浮动的外围元素内浮动元素的溢出的几种解决方法

一个非浮动的外围元素内，如果包含若干个浮动元素，且这些浮动元素的高度超过包围它的外围元素内的其它内容就会出现这些浮动元素溢出的情况，如下图的情况：

1. 在该外围元素关闭前，比如：在</div>前添加<br class=”clear”/>，然后设置.clear{clear:both}
2. 将该外围元素也设为浮动，添加div{float:left/right;}，但此方法注意需要在后续元素样式中加入clear:both，使后续元素在该外围元素下方显示
3. 在该外围元素样式块中加入属性overflow:hidden
4. 个人推崇也是最安全的方法，即首先在html中为该外围元素添加clear类，然后 .clear:after{content:”.”;display:block;height:0;font-size:0;clear:both;visibility:hidden;}

以上为一些解决方法，记录并学会使用！