CSS清浮动处理（Clear与BFC）

时间 2019-11-18

标签 css 浮动处理 clear bfc 栏目 CSS 繁體版

原文原文链接

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

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>

咱们但愿看到的效果是这样的html

但结果倒是这样的浏览器

父容器并无把浮动的子元素包围起来，俗称塌陷，为了消除这种现象，咱们须要一些清除浮动的技巧。布局

2 如何清理浮动

清理浮动通常有两种思路spa

利用 clear属性，清除浮动
使父容器造成BFC

分别看一下3d

2.1 利用 clear属性，清除浮动

clear属性是个什么东东呢？clear 属性规定元素的哪一侧不容许其它以前浮动元素，修改一下刚才代码code

<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，这样就能够达到咱们目的了。orm

2.1.1 添加空div清理浮动

对咱们刚才代码稍做修改htm

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

也就是在父容器最后添加 blog

<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边距重叠，本文中没有列出来。

有同窗会提出来了上面方法看起来不错，可是IE六、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

咱们知道在IE六、7内有个hasLayout的概念，不少bug正式由hasLayout致使的，当元素的hasLayout属性值为false的时候，元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC相似的效果，元素负责自己及其子元素的尺寸设置和定位。咱们能够利用这点儿在IE六、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+、现代浏览器上使用伪元素
在IE六、7使用hasLayout

具体应该使用哪一种方式来使元素hasLayout为true呢？相对而言zoom：1比较好，由于不会形成其它影响。想形成只在IE六、7上使用某些CSS的效果，咱们还得须要一些CSS hack的知识，感兴趣同窗能够看看 CSS hack，咱们能够写出这样的CSS

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

4 最后

虽然咱们得出了一种浏览器兼容的靠谱解决方案，但这并不表明咱们必定得用这种方式，不少时候咱们的父容器自己须要position：absolute等造成了BFC的时候咱们能够直接利用这些属性了，你们要掌握原理，活学活用。总而言之清理浮动两种方式

利用 clear属性，清除浮动
使父容器造成BFC