清除浮动的方法

1、问题场景

界面布局:

    外部div包含两个内部div,外部id为container,内部id为first和second。

   #container:width:auto;height:auto;

   #first和#second均包含样式float:left。

出现页面异常:#container 高度不能随内部div(first和second)撑开。高度为0(当设定了边框border的px值后则高度仅仅为边框的高度。);

出现异常的原因:float导致#frist和#second的div脱离页面标准流显示,#cotnainer下的标准流中不包含任何内容。故无法被撑开。

2、清除浮动的三种方法:(更多参见下面张鑫旭链接)

2.1 精确计算container应该的高度,然后设定对应固定高度。#container: height:**px;

2.2 给#container 中添加一个#third 的div。设定class="clear:both"; 实现清除浮动。

2.3 给#container div添加样式 overflow:hidden。

详细资料:http://www.divcss5.com/jiqiao/j406.shtml (非常感谢分享)

 后来看了下张鑫旭的文章,发觉还有更多种方法可以实现(包括在外部div加上display:inline-block,或者float:left;或者position:absolute,或者zoom:1等),具体链接:http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/(第三部分:包裹与清除浮动。感谢分享).

2.4 解决异常后的样子

原文地址:https://www.cnblogs.com/luckyflower/p/4220680.html