什么是浮动以及浮动的清除方法

<div class="parent">    
    <div class="child"></div>
    <br clear='all'>
</div>

优点：简单代码量少，比空标签语义化稍好。

缺点：增加了额外的标签，并且很显然这并不符合语义化。

2.使用::after伪元素(万金油方法)

ps:由于IE6-7不支持:after，使用`zoom:1触发hasLayout。其实是通过 content 在元素的后面生成了内容为空的块级元素

代码如下：

.clearfix:after {    
    content:"";    
    display:block;    
    height:0;    
    visibility:hidden;//这一条可以省略，证明请看原文精益求精部分
    clear:both; 
}.clearfix {
    zoom:1;
}
优点：结构和语义化完全正确,代码量居中。
缺点：复用方式不当会造成代码量增加。
伪元素还有一种写法：
// 用display:table 是为了避免外边距margin重叠导致的margin塌陷, 内部元素默认会成为 table-cell 单元格的形式
.clearfix:before, .clearfix:after {    content:"";    display:table;}
.clearfix:after{    clear:both;    overflow:hidden;}
.clearfix{ zoom:1; }
3.父元素设置 overflow：hidden,(PS:在IE6中还需要触发 hasLayout ，例如 zoom:1)
优点：不存在结构和语义化问题，代码量极少。
缺点：由于hidden的原因，当内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素，还会导致中键失效（鼠标中键）。
4.父元素设置 overflow：auto 属性
优点：同上
缺点：多个嵌套后，会有bug，详情看原文。
5.父元素也浮动
优点：代码少
缺点：总不能一直浮动到body吧。
6.父元素设置display:table
优点：结构语义化完全正确，代码量极少。
缺点：会造成盒模型的改变。



以上就是什么是浮动以及浮动的清除方法的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：啥是浮动以及浮动的清除办法