标签：技术 ie6 lse data- log flow logs you 盒模型
1 <div class="wrap" id="float1">
2 <h2>1）添加额外标签</h2>
3 <div class="main left">.main{float:left;}</div>
4 <div class="side left">.side{float:right;}</div>
5 <div style="clear:both;"></div>
6 </div>
7 <div class="footer">.footer</div>
缺点：会添加许多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦
2.使用 br标签和其自身的 html属性，这个方法有些小众，br 有 clear=“all | left | right | none” 属性
1 <div class="wrap" id="float2">
2 <h2>2）使用 br标签和其自身的 html属性</h2>
3 <div class="main left">.main{float:left;}</div>
4 <div class="side left">.side{float:right;}</div>
5 <br clear="all" />
6 </div>
7 <div class="footer">.footer</div>
缺点：有违结构与表现分离
3.父元素设置 overflow：hidden：通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；
1 <div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">
2 <h2>3)父元素设置 overflow </h2>
3 <div class="main left">.main{float:left;}</div>
4 <div class="side left">.side{float:right;}</div>
5 </div>
6 <div class="footer">.footer</div>
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
4.父元素设置 overflow：auto 属性
1 <div class="wrap" id="float3" style="overflow:auto; *zoom:1;">
2 <h2>3)父元素设置 overflow </h2>
3 <div class="main left">.main{float:left;}</div>
4 <div class="side left">.side{float:right;}</div>
5 </div>
6 <div class="footer">.footer</div>
缺点：多个嵌套后，firefox某些情况会造成内容全选
5.父元素设置display : table
1 <div class="wrap" id="float6" style="display:table;">
2 <h3>4）父元素设置display:table</h3>
3 <div class="main left">.main{float:left;}</div>
4 <div class="side left">.side{float:right;}</div>
5 </div>
6 <div class="footer">.footer</div>
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用
6.使用:after 伪元素
1 <style>
2 .clearfix:after {
3 clear: both;
4 content: ".";
5 display: block;
6 height: 0;
7 visibility: hidden;
8 }
9
10 .clearfix {
11 *zoom: 1;
12 }
13 </style>
14 <div class="wrap clearfix" id="floa7">
15 <div class="main left">.main：wrap自己闭合浮动了，所以footer不用再清除浮动了(float:left)</div>
16 <div class="side left">.side：我也浮动了(float:left)</div>
17 </div>
18 <div class="footer">.footer：这次 wrap 人品爆发了, 通过 .clearfix 已经<strong>闭合浮动</strong>了</div>
缺点：复用方式不当会造成代码量增加
结论：
通过对比我们不难发现，以上的列举方法，无非有两类：
①. 通过在浮动元素的末尾添加一个空元素，设置clear:both 属性，:after伪元素其实也是通过content 在元素的后面生成了内容为一个点的块级元素；
②. 通过设置父元素 overflow 或者display：table 属性来闭合浮动
推荐直接使用方式7伪元素的方法闭合浮动
引用：
1. 那些年我们一起清除过的浮动：http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html
标签：技术 ie6 lse data- log flow logs you 盒模型
原文地址：https://www.cnblogs.com/oulae/p/11143405.html
