ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSクリアフロート処理

CSSクリアフロート処理

巴扎黑オリジナル: 2017-06-28 10:32:341180ブラウズ

CSSレイアウトではfloat属性がよく使われますが、float属性を使用すると通常のフローでは親コンテナと切り離されてしまい非常に面倒です

1 フローティングはレイアウトに便利さをもたらしますが、新たな問題ももたらします

CSSクリアフロート処理

 1 nbsp;html> 2  3  4     <meta> 5     <title>Clear float</title> 6     <style> 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 24 25     <p>26         </p><p>27             </p><p></p>28             <p></p>29             <p></p>30         31     32 33

CSSクリアフロート処理

私たちが期待している効果は次のようになります

しかし、結果は次のようになります

、一般にコラプスとして知られているこの現象を解消するには、明確なフローティングのテクニックが必要です。

2.1 フロートをクリアするにはクリア属性を使用します

クリア属性とは何ですか?
clear 属性は、要素のどの側で他のフローティング要素を許可しないかを指定します。今すぐコードを変更してください
```

    
    
    
```
。

第二个p添加了clear:both属性后，其左侧的p（第一个p）不再浮动，所以后面的p都还行(huan hang)了。我们可以利用这点儿在父容器的最后添加一个空的p，设置属性clear:left，这样就可以达到我们目的了。

2.1.1 添加空p清理浮动

对我们刚才代码稍作修改
```

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

```
看看效果

果真好使了，有些同学看了后可能感觉奇怪，为什么想上一个例子修改第二个p
```

```
没有变成这样的效果

说一下自己的拙见，clear:left属性只是消除其左侧p浮动对它自己造成的影响，而不会改变左侧p甚至于父容器的表现，在父容器看来，三个p还都是float的，所以高度依旧塌陷。但是我们在最后添加了一个非浮动的p，由于它有clear:left属性，所以它会按照左侧p不浮动来定位自己，也就是定位到下一行，而父容器看到有一个非浮动、普通流的子元素元素，会将其包围，这样造成了顺便也把三个浮动元素也包裹起来的效果，高度不再塌陷（不知道说明白没有或者这种理解对不对，还望明白的同学指点）。

当然除了添加p，还可以添加br等其它html元素，原理相同，不再赘述。

2.1.2 使用CSS插入元素

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

添加一个类 floatfix
```
.floatfix:after{
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:left;
}
```
对父容器添加此类
```

    1
    2
    3
```
这样我们就可以看到正确效果了

简单解释一下，对父容器添加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可以包含浮动
我们可以利用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

简单修改一下代码
```

    1
    2
    3
```
这样我们可以得到结果

我们可以看到父容器高度没有塌陷，但是长度变短了，因为p应用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