首页 > 代码库 > CSS清浮动处理(Clear与BFC)

CSS清浮动处理(Clear与BFC)

在CSS布局中float属性常常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人非常苦恼

1 浮动带来布局的便利,却也带来了新问题

复制代码
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Clear float</title>
 6     <style type="text/css">
 7         .container{
 8             margin: 30px auto;
 9             width:600px;
10             height: 300px;
11         }
12         .p{
13             border:solid 3px #a33;
14         }
15         .c{
16             width: 100px;
17             height: 100px;
18             background-color: #060;
19             margin: 10px;
20             float: left;
21         }
22     </style>
23 </head>
24 <body>
25     <div class="container">
26         <div class="p">
27             <div class="c"></div>
28             <div class="c"></div>
29             <div class="c"></div>
30         </div>
31     </div>
32 </body>
33 </html>
复制代码

我们希望看到的效果是这种

但结果却是这种

父容器并没有把浮动的子元素包围起来,俗称塌陷,为了消除这样的现象,我们须要一些清除浮动的技巧。

2 怎样清理浮动

清理浮动一般有两种思路

  1. 利用 clear属性,清除浮动
  2. 使父容器形成BFC

分别看一下

2.1 利用 clear属性,清除浮动

clear属性是个什么东东呢?clear 属性规定元素的哪一側不同意其他之前浮动元素,改动一下刚才代码

<div class="p">
    <div class="c"></div>
    <div class="c" style="clear:left;"></div>
    <div class="c"></div>
</div>

第二个div加入?了clear:both属性后,其左側的div(第一个div)不再浮动,所以后面的div都还行(huan hang)了。我们能够利用这点儿在父容器的最后加入?一个空的div,设置属性clear:left,这样就能够达到我们目的了。

2.1.1 加入?空div清理浮动

对我们刚才代码稍作改动

<div class="p">
    <div class="c"></div>
    <div class="c"></div>
    <div class="c"></div>
    <div style="clear:left;"></div>
</div>

也就是在父容器最后加入? 

<div style="clear:left;"></div>

看看效果

果真好使了,有些同学看了后可能感觉奇怪,为什么想上一个样例改动第二个div

<div class="c" style="clear:left;"></div>

没有变成这种效果

说一下自己的拙见,clear:left属性仅仅是消除其左側div浮动对它自己造成的影响,而不会改变左側div甚至于父容器的表现,在父容器看来,三个div还都是float的,所以高度依然塌陷。可是我们在最后加入?了一个非浮动的div,因为它有clear:left属性,所以它会依照左側div不浮动来定位自己,也就是定位到下一行,而父容器看到有一个非浮动、普通流的子元素元素,会将其包围,这样造成了顺便也把三个浮动元素也包裹起来的效果,高度不再塌陷(不知道说明确没有或者这样的理解对不正确,还望明确的同学指点)。

当然除了加入?div,还能够加入?br等其他html元素,原理同样,不再赘述。

2.1.2 使用CSS插入元素

上面的做法浏览器兼容性不错,可是有个非常大的问题就是向页面加入?了内容来达到改变效果的目的,也就是数据和表现混淆,既然是变现,看看怎么使用CSS来解决这一问题。根本的做法还是向父容器最后追加元素,但我们能够利用CSS的:after伪元素来做此事。

加入?一个类 floatfix

复制代码
.floatfix:after{
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:left;
}
复制代码

对父容器加入?此类

<div class="p floatfix">
    <div class="c">1</div>
    <div class="c">2</div>
    <div class="c">3</div>
</div>

这样我们就能够看到正确效果了

简单解释一下,对父容器加入?floatfix类后,会为其追加一个不可见的块元素,然后设置其clear属性为left,和刚才原理类似。

2.1.3 大师手笔

Nicolas Gallagher 在A new micro clearfix hack中提供了一种看起来更清爽的做法

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

Nicolas Gallagher原文中还有:before是为了处理margin边距重叠,本文中没有列出来。

有同学会提出来了上面方法看起来不错,可是IE6、7不支持伪元素怎们办?这就须要我们使用BFC/haslayout的姿势了

2.2 使父容器形成BFC

经过了前些日子园里关于BFC的狂轰滥炸相信大家都对BFC有了一定的了解,只是瘾的同学能够看看 Block Format Content,BFC有三个特性

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

    依照BFC的定义,仅仅有同属于一个BFC时,两个元素才有可能发生垂直Margin的重叠,这个包含相邻元素,嵌套元素,仅仅要他们之间没有阻挡(比如边框,非空内容,padding等)就会发生margin重叠。

    因此要解决margin重叠问题,仅仅要让它们不在同一个BFC即可了,可是对于两个相邻元素来说,意义不大,没有必要给它们加个外壳,可是对于嵌套元素来说就非常有必要了,仅仅要把父元素设为BFC就能够了。这样子元素的margin就不会和父元素的margin发生重叠了。

  • BFC不会重叠浮动元素
  • BFC能够包括浮动

我们能够利用BFC的第三条特性来“清浮动”,这里事实上说清浮动已经不再合适,应该说包括浮动。也就是说仅仅要父容器形成BFC就能够,简单看看怎样形成BFC

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

我们能够对父容器加入?这些属性来形成BFC达到“清浮动”效果

2.2.1 利用float来使父容器形成BFC

简单改动一下代码

<div class="p" style="float:left;">
    <div class="c">1</div>
    <div class="c">2</div>
    <div class="c">3</div>
</div>

这样我们能够得到结果

我们能够看到父容器高度没有塌陷,可是长度变短了,由于div应用float‘后会依据内容来改变长度,这个在非常多时候非常实用,可是我们不希望有这样的效果怎么办?

2.2.2 使用BFC的其他局限

上面提到使用BFC使用float的时候会使父容器长度缩短,并且还有个重要缺陷——父容器float攻克了其塌陷问题,那么父容器的父容器怎么办?难道要所有使用folat吗(确实有这样的布局方式倒是)。BFC的几种方式都有各自的问题,overflow属性会影响滚动栏和绝对定位的元素;position会改变元素的定位方式,这是我们不希望的,display这几种方式依旧没有解决低版本号IE问题。。。

看起来还是第一种方式比較好,但是低版本号IE该怎么办呢?

2.2.3 hasLayout

我们知道在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

3 一个相对靠谱的解决方式

经过上面的比較我们能够得出一个相对靠谱的解决方式

  • 在IE+、现代浏览器上使用伪元素
  • 在IE6、7使用hasLayout

详细应该使用哪种方式来使元素hasLayout为true呢?相对而言zoom:1比較好,由于不会造成其他影响。想造成仅仅在IE6、7上使用某些CSS的效果,我们还得须要一些CSS hack的知识,感兴趣同学能够看看 CSS hack,我们能够写出这种CSS

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

4 最后

尽管我们得出了一种浏览器兼容的靠谱解决方式,但这并不代表我们一定得用这样的方式,非常多时候我们的父容器本身须要position:absolute等形成了BFC的时候我们能够直接利用这些属性了,大家要掌握原理,活学活用。总而言之清理浮动两种方式

  1. 利用 clear属性,清除浮动
  2. 使父容器形成BFC

CSS清浮动处理(Clear与BFC)