① 例如：＜ div id=”floatA”>＜ div id=”floatB”>＜ div id=”NOTfloatC”>
这里的 NOTfloatC 并不希望继续平移，而是希望往下排。(其中 floatA、floatB 的属性已经设置为 float:left;)
这段代码在 IE 中毫无问题，问题出在 FF。原因是 NOTfloatC 并非 float 标签，必须将 float 标签闭合。在＜ div class=”floatB”>＜ div class=”NOTfloatC”>之间加上＜ div class=”clear”>这个 div 一定要注意位置，而且必须与两个具有 float 属性的 div 同级，之间不能存在嵌套关系，否则会产生异常。并且将 clear 这种样式定义为为如下即可：.clear{clear:both;}
② 作为外部 wrapper 的 div 不要定死高度,为了让高度能自适应，要在 wrapper 里面加上 overflow:hidden; 当包含 float 的 box 的时候，高度自适应在 IE 下无效，这时候应该触发 IE 的 layout 私有属性(万恶的 IE 啊！)用 zoom:1;可以做到，这样就达到了兼容。 例如某一个 wrapper 如下定义：
.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}
③ 对于排版,我们用得最多的 css 描述可能就是 float:left.有的时候我们需要在 n 栏的 float div 后面做一个统一的背景,譬如:
比如我们要将 page 的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着 left center right 的向下拉长,而 page 居然保存高度不变,问题来了,原因在于 page 不是 float 属性,而我们的 page 由于要居中,不能设置成 float,所以我们应该这样解决：
再嵌入一个 float left 而宽度是 100%的 DIV 解决之。
或者另一种方法：用选择器（：after）在 page 之后插入一个空标签,并清除浮动
.page:after { content: ""; display: table; clear: both; }
④ 万能 float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入 Global CSS 中,给需要闭合的 div 加上 class="clearfix" 即可,屡试不爽。
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; }
.clearfix {display:block;}
或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}