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

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

WBOY

リリース： 2016-06-24 11:37:22

オリジナル

1221 人が閲覧しました

.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;
}

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

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

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

二，.clearfix的弊端

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

Demo

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

しかし、.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 を除き、他のメソッドは目的を達成するために新しいブロックフォーマットコンテキストを生成するだけです。どの方法をどのような条件で使用できるのであれば、それで十分だと思います...