Clearfix のフロートクリアに関する CSS についてのチャット [transfer]_html/css_WEB-ITnose

.clearfix:after { content: " "; display: block; clear: both; height: 0;}.clearfix { zoom: 1; display: table;}

转载地址：http://www.imooc.com/wenda/detail/11605

闲聊CSS之关于clearfix--清除浮动

一，什么是.clearfix

你只要到Google或者Baidu随便一搜"css清除浮动"，就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix"。

.clearfix:after {
 content: " ";
 display: block;
 clear: both;
 height: 0;
}
.clearfix {
 zoom: 1;
}

ca261de8948f09c1f55714bd712c3226
 f7a4f3a4c1c61b82b1cad69d8750dddb16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

上面的代码就是.clearfix的定义和应用，简单的说下.clearfix的原理：

1、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。

2、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。

dc6dce4a544fdca2df29d5ac0ea9906b
 f7a4f3a4c1c61b82b1cad69d8750dddb16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
9af88be03299089c360bbd2078edcd0616b28748ea4df4d9c2150843fecfba68

二，.clearfix的弊端

在上面的代码中可以看到，抛开IE6, 7不谈，.clearfix在标准浏览器下插入了一个clear: both的元素，这样很可能清除掉不必要的浮动。举例来说明：

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
 b2386ffb911b14667cb8f0f91ea547a7Demo6e916e0f7d1e588d4f442bf645aedb2f
 9a6c6593cd224a767d2b5172bc71b53a
   html, body { padding: 0; margin: 0; }
   ul { margin: 0; padding: 0; } 
 
   .clearfix:after {
     content: " ";
     display: block;
     clear: both;
     height: 0;
   }
   .clearfix {
     zoom: 1;
   }
 
   .left-col {
     background: red;
     float: left;
     width: 100px;
     height: 300px;
   }
   .right-col {
     margin-left: 100px;
   }
   .menu {
     border: 1px solid #000;
   }
   .menu li {
     float: left;
     display: block;
     padding: 0 1em;
     margin: 0 1em 0 0;
     background: #ccc;
   }
   .placeholder {
     background: yellow;
     height: 400px;
   }
 531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
 64f80edaa7bc66c2c3fa1240fbb458f3
 16b28748ea4df4d9c2150843fecfba68
 97e7a55f6cf3ae07bcaf23b20d9c98f3
   0e0f44151592e0d322915dad88a0a373
     25edfb22a4f469ecb59f1190150159c6Menu Itembed06894275b65c1ab86501b08a632eb
     25edfb22a4f469ecb59f1190150159c6Menu Itembed06894275b65c1ab86501b08a632eb
     25edfb22a4f469ecb59f1190150159c6Menu Itembed06894275b65c1ab86501b08a632eb
     25edfb22a4f469ecb59f1190150159c6Menu Itembed06894275b65c1ab86501b08a632eb
     25edfb22a4f469ecb59f1190150159c6Menu Itembed06894275b65c1ab86501b08a632eb
     25edfb22a4f469ecb59f1190150159c6Menu Itembed06894275b65c1ab86501b08a632eb
   929d1f5ca49e04fdcb27f9465b944689
   1f8124d72cc10be169be8be3272a73e116b28748ea4df4d9c2150843fecfba68
 16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

上記のコードは 2 列のレイアウト ページを構成します。 .menu メニューには境界線がありますが、.menu の li 要素が左にフローティングしているため、.menu には高さがなく、.clearfix を使用して .menu 内のフローティング コンテンツをクリアできることに注意してください。コードは次のとおりです。

f74b3962dd41cc078973ec8634f6798a
25edfb22a4f469ecb59f1190150159c6メニュー項目bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6メニュー項目bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6メニュー項目2867e861ba23559b572f230426ab14ea
25edfb22a4f469ecb59f1190150159c6メニュー項目bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6メニュー項目bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6メニュー項目bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

しかし、.clearfixを適用した後、標準ブラウジング ブラウザ下のページが非常に汚くなります。これは、.clearfix:after が .left-col の float もクリアするためです。

3. .clearfix を再構築します

上記のエラーが発生した後、.clearfix:after 以外に要素内の float をクリアする方法があるかどうかを分析します。答えは「はい」です。「現地語のブロック フォーマット コンテキスト」の記事では、ブロック フォーマット コンテキストを構成する要素が内部要素のフローティングをクリアできると述べられています。次に、.clearfix をブロック フォーマット コンテキストとして作成します。ブロック フォーマット コンテキストを構成するにはいくつかの方法があります:

float の値は none ではありません。オーバーフローの値は表示されません。 display の値は、table-cell、table-caption、inline-block のいずれかです。位置の値は相対的でも静的でもありません。

明らかに、float とposition は私たちのニーズには適していません。オーバーフローまたはディスプレイから 1 つだけ選択できます。 .clearfix および .menu で適用されるメニューはマルチレベルである可能性が非常に高いため、overflow: hidden または overflow: auto はニーズを満たしていません (ドロップダウン メニューが非表示になるか、スクロール バーが表示されます)。表示のみを使用します。 アクションを実行します。

.clearfixのdisplay値はtable-cell、table-caption、inline-blockのいずれかに設定できますが、display:inline-blockは冗長な空白が発生するのでこれも除外します。残っているのは table-cell と table-caption だけです。display: table は匿名ボックスの 1 つを生成するため、display: table を使用して .clearfix をブロック フォーマット コンテキストにできます。 (表示値はテーブルセル) はブロックフォーマットコンテキストを形成します。このようにして、新しい .clearfix は内部要素のフロートを閉じます。以下はリファクタリング後の .clearfix です。

.clearfix {
zoom:1;
display:table;
}

4 番目の概要

IE6 および 7 では、hasLayout をトリガーする要素が内部フロートをクリアできる限り。標準ブラウザで要素の内部フロートをクリアする方法は数多くありますが、.clearfix:after を除き、他のメソッドは目的を達成するために新しいブロック フォーマット コンテキストを生成するだけです。どの方法をどのような条件で使用できるのであれば、それで十分だと思います...