关于css清除元素浮动的方法总结(overflow clear floatfix)

在前两天的一个面试中考官问我web中清除浮动的一些css常用方法,我很轻松的答出了:

1.overflow:hidden

2.clear:both

3.floatfix类

然后问题就来了,考官接着问'为什么overflow:hidden'可以清除浮动?这下就把我问住了。写了这么多年css只是单纯的解决问题,但是从来没想过为什么。

看来是需要反省和认真总结一下以前的这些细节问题了,只要不明白的就要加一个'为什么?'

clear:both

这三种方法里最好理解的就是clear:both

    <style>
#con{border: 2px dashed #ccc;padding:5px;}
div.c{width: 100px;height: 100px;background-color: green;margin-right:5px; _display: inline; float: left;color: #fff;}
</style>
<div id="con">
<div class="c">内容一</div>
<div class="c">内容二</div>
<div class="c">内容三</div>
<div style="clear:both"></div>
</div>

原理就是在父元素最后面添加一个非浮动的空div由于有clear:both属性用来清除浮动,父元素会把它包围起来,顺带手把float:left的div也一起包裹起来,高度不再塌陷。

这种方法不再流行的主要原因就是改变了结构添加了无用的内容。

overflow:hidden

写这篇文章的起因就是它overflow:hidden,到底为什么加入这个属性就可以清除浮动呢?我上网查了一下,文章还是挺多的'block format content'下面简称BFC,相关文章可以自己搜一下挺多的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#con{border: 2px dashed #ccc;padding:5px;overflow: hidden;}
#con div.c{width: 100px;height: 100px;background-color: green;margin-right:5px; _display: inline; float: left;color: #fff;}
</style>
</head>
<body> <div id="con">
<div class="c">内容一</div>
<div class="c">内容二</div>
<div class="c">内容三</div>
</div>
</body>
</html>

添加这个属性就使父级容器形成了BFC,它有三个特性:

1.BFC会阻止垂直外边距(margin-top、margin-bottom)折叠

2.BFC不会重叠浮动元素

3.BFC可以包含浮动

父级形成了BFC之后说'清除浮动'有点不太恰当,应该改为'包含浮动'。形成BFC的一些方法:

  • float为 left|right
  • overflow为 hidden|auto|scroll
  • display为 table-cell|table-caption|inline-block
  • position为 absolute|fixed

当然父级BFC也不是一个很好的解决方法,比如:

1.父级设置float:left会改变宽度,父级也会悬浮

2.父级设置overflow:hidden会影响绝对定位的定位的子元素显示问题

3.ie6兼容性

.floatfix

最后说现在大家都在用的floatfix类

.floatfix{*zoom:1;}
.floatfix:after{content:"";display:table;clear:both;}

.floatfix:after挺好理解的,就是在元素后面添加一个清除浮动的元素等同于<div style="clear:both"></div>,只不过这是用css来添加的。

但是IE6、7不支持a以外的伪类,所以我们再用*zoom:1用来兼容IE6、7。

在IE6、7内有个hasLayout的概念,很多bug都是由hasLayout导致的,当元素的hasLayout属性值为false的时候,元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果,元素负责本身及其子元素的尺寸设置和定位。我们可以利用这点儿在IE6、7下完成清浮动,先看看怎么使元素hasLayout为true

  • position: absolute
  • float: left|right
  • display: inline-block
  • width: 除 “auto” 外的任意值
  • height: 除 “auto” 外的任意值
  • zoom: 除 “normal” 外的任意值
  • writing-mode: tb-rl

在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout为true

最后总结

现在我们已经知道父级div什么情况可以形成BFC,ie6、7的hasLayout属性值什么时候可以形成true,那么在项目的不同应用中就可以使用不同的方法来清除浮动了。

上一篇:lua日期与时间操作


下一篇:Angular 项目里 angular.json 文件内容的学习笔记