闭合浮动

Posted 2022-03-20 oulae

浮动属性：

　　当一个元素使用float声明时，网络布局的规则会使元素浮动到其父元素的左侧或右侧，此时该元素的空间将脱离其父元素的限制，且之后的元素的布局也会受到影响（如margin元素的将会被忽视）。

 

闭合浮动与清除浮动的区别：

　　清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none ，清除浮动一般是使用clear 属性即可

　　闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响，简而言之就是使包含框表现出正常的高度，闭合浮动一般要声明伪元素

　　总结：用闭合浮动比清除浮动更加严谨，所以之后中文统一称之为闭合浮动

 

图：闭合浮动与清除浮动的区别

 

闭合浮动的各种方法：

　　1.添加额外的标签：通过在浮动元素末尾添加一个空的标签，例如：<div style=”clear:both”></div>，其他标签br 等亦可

1 <div class="wrap" id="float1">
2     <h2>1）添加额外标签</h2>
3     <div class="main left">.mainfloat:left;</div>
4     <div class="side left">.sidefloat: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">.mainfloat:left;</div>
4     <div class="side left">.sidefloat: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">.mainfloat:left;</div>
4     <div class="side left">.sidefloat: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">.mainfloat:left;</div>
4     <div class="side left">.sidefloat: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">.mainfloat:left;</div>
4         <div class="side left">.sidefloat: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