フローティングとクローズフローティングのクリア

クリアフローティング:クリア対応する単語はclear、対応するCSSの属性はclear:left|right|both|none;

フローティングを閉じる:フローティング要素を閉じ、フローティングによる影響を低減します.

WHYクリアフローティング

CSSでの位置決めメカニズム:通常フロー、フローティング、絶対位置決め(「position:fixed」は「position:absolute」のサブクラス).

普通の流れ:多くの人や文章はドキュメントの流れや普通のドキュメントの流れと呼ばれていますが、実際には標準にはこの言葉はありません.ドキュメントフローを英語に直訳するとdocument flowですが、標準的には普通フロー(normal flow)と呼ばれる別の語しかありません.あるいは通常フローと呼ばれます.しかし、多くの中国語翻訳の本がこのように来ているため、文書の流れの呼び方に慣れているようです.例えば「CSS Mastery」では、英語の原書には最初から最後まで普通流normal flow(普通流)という言葉しかなく、document flow(ドキュメントフロー)

は一度も現れたことがない.

フローティング:フローティングボックスは、その外縁がボックスまたは別のフローティングボックスを含むエッジに遭遇するまで左右に移動することができる.フローティングボックスはドキュメント内の通常のフローではありません.1つの要素がフローティングされた後、ブロック・レベル・ボックスのレイアウトには影響せず、インライン・ボックス(通常はテキスト)の配置にのみ影響します.ドキュメント内の通常のフローは、フローティング・ボックスが存在しないのと同じように表現されます.フローティング・ボックスの高さがパッケージ・ボックスを超えている場合、ボックスが自動的に高くなってフローティング要素を閉じることはありません(「高さの集約」現象).その名の通り、普通の流れの上に浮かんで、浮雲のように浮かぶが、左右に浮かぶしかない.(私たちが見たくないので、クリアして閉じてフローティングします)

フローティングのクリア

追加ラベル:

フローティング要素の末尾になどの空のラベルを追加することにより、他のラベルbrなども可能である
brラベルとそれ自体のhtmlプロパティを使用して、

長所:分かりやすく、把握しやすい
欠点:この方法によって、どれだけ無意味な空のラベルが追加され、構造と表現の分離に反し、後期メンテナンスで悪夢になるか想像できます.

親要素設定overflow:hidden

親要素overflow値をhiddenに設定します.IE 6ではhasLayout、例えばzoom:1をトリガする必要がある.
 

 <div class="warp" id="float3" style="overflow:hidden; *zoom:1;">

<h2>3)      overflow </h2>

<div class="main left">.main{float:left;}</div>

<div class="side left">.side{float:right;}</div>

</div>

<div class="footer">.footer</div>

利点:構造や意味化の問題がなく、コード量が極めて少ない.
 
欠点:コンテンツが増えると自動的に改行しないため、コンテンツが隠され、オーバーフローする要素が表示されなくなりやすい.04年にPOPOPOはoverflow:hiddenが中キーを失効させることを発見しました.これは私がマルチタグ閲覧制御として受け入れられないことです.だから使わないでください.

親要素設定overflow:auto属性

同様にIE 6はhasLayoutをトリガする必要があり、プレゼンテーションと3の差は多くありません.
利点:構造と意味化の問題がなく、コード量が極めて少ない
 
欠点:複数のネスト後、firefoxはコンテンツをすべて選択する場合があります.IEではmouseoverによって幅が変わると最外層モジュールにスクロールバーなどがあり、firefoxの初期バージョンでは理由もなくfocusなどが発生するので、嗷のDemoを見て使用しないでください
 

親要素もフローティング

を設定する.
利点:構造と意味化の問題がなく、コード量が極めて少ない
欠点:親要素に隣接する要素のレイアウトに影響を与えるため、bodyまでフローティングすることはできません.推奨しません.

使用:after擬似要素

注意しなければならないのは、afterは偽元素(Pseudo-Emement)であり、偽類(一部のCSSマニュアルでは「偽対象」と呼ばれている)ではなく、浮動大全をクリアするなどの文章の多くは偽類と呼ばれているが、csserは厳格にしなければならないという態度だ.
 
IE 6-7は:afterをサポートしていないため、zoom:1を使用してhasLayoutをトリガーします.
 
この方法は、How To Clear Floats Without Structural Markupに由来する
 
原文のすべてのコードは以下の通りです.
 

<style type="text/css"> 
.clearfix:after { 
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden; 
} 
 .clearfix {display: inline-block;}  /* for IE/Mac */  
</style>
<!--[if IE]> <style type="text/css">
.clearfix {zoom: 1;/* triggers hasLayout */ 
display: block;/* resets display for IE/Win */}
</style> 
<![endif]-->

IE/Macの市場占有率が極めて低いことを考慮して、私たちは直接無視して、最後に簡素なコードは以下の通りです.

 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

利点:構造と意味化が完全に正確で、コード量が中央にある
欠点:多重方式が適切でないとコード量が増加する

精進する

上に7種類のクローズドフローティングの方法を列挙したが,第3節の解析の原理から,display:table-cell,display:inline-blockなどBFCの属性値をトリガすればクローズドフローティングが可能であることが分かった.各方面から比較すると,after擬似要素閉鎖フローティングは比較的良好な解決策であるに違いないが,以下ではこの方法を詳細に述べる.

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

display:blockは生成した要素をブロックレベルの要素で表示させ、残りの空間を満たす.

height:0コンテンツの生成が既存のレイアウトの高さを破壊することを回避します.

visibility:hiddenは生成されたコンテンツを非表示にし、生成されたコンテンツに覆われる可能性のあるコンテンツがクリックおよびインタラクションできるようにする.

content:"."内容を生成するのは最後の要素として、contentの中には点か他かはすべて可能で、例えばoocssの中には経典のcontentがあります:“XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”、一部のバージョンはcontentの中の内容が空で、少し冷たいのはこのようにすることをお勧めしないで、firefoxは7.0 contentまで:“依然として余分な隙間を生みます;

zoom:1 IE hasLayoutをトリガーします.

分析によると、clear:bothがフローティングをクリアするために使用されているほか、他のコードはcontentが生成した内容を隠すために使用されているにほかならない.これは、他のバージョンの閉じたフローティングがfont-size:0、line-height:0を持っている理由である.

精進方案一：

.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }

.clearfix { *zoom:1; }.

 

精進方案二：

Nicolas Gallagher大湿から抽出された、原文:A new micro clearfix hack、この方法にもfirefox中の空隙の問題は存在しない.

/* For modern browsers */

.cf:before,.cf:after {

content:"";

display:table;

}

.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */

.cf { zoom:1; }

 

次の点に注意してください。

上の方法は使いました:beforeの偽元素、多くの人はこれに対して少し迷って、いったい私はいつbeforeを使う必要がありますか?どうして案が一つもないのですか.内部要素floatがBFCを作成したため、内部要素のmargin-topと前の箱のmargin-bottomが重なり合うのを処理するために使用されます.もしこれがあなたが望んでいないならば、beforeを加えることができて、単純な閉じた浮動だけならば、afterは十分です!砂漠の「Clear Float」で述べたように、clearfix:afterのみを使用する場合、ブラウザ間互換性の問題で垂直マージンが重なるバグがあります.これはバグではなく、BFCにあるべき特性です.
 
 
テキストリンク:http://www.cnblogs.com/mofish/archive/2012/05/14/2499400.html
原文参考記事:

Page breaks and block-formatting contexts: Allowed page breaks (13.3.3)

Clearfix and block formatting contexts: Everything you Know about Clearfix is Wrong

Block formating contexts, “hasLayout” – IE Window vs CSS2.1 browsers: simulations.

New block formatting contexts next to floats

Control Block Formatting Context

On having layout,[訳文]On having layouthttp://old9.blogsome.com/2006/04/11/onhavinglayout

“HasLayout” Overview

hasLayout Property

IE hasLayout

https://developer.mozilla.org/en/CSS/block_formatting_context

番外整理:

最適フローティング閉鎖スキーム(これは我々が推奨する):

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}

使用法は簡単で、フローティング要素の親クラウドにclass=「demo clearfix」を追加します.

この方法にも弊害があることに気づきますが、確かに小さな問題です.cssの書き方を変えればOK:

.demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.demo,.demo2{*+height:1%;}

以上の書き方でhtml構造の変更を回避し,cssで直接解決した.

風引きの書き方:

.clearfix{overflow:auto;_height:1%}

前段牛提供の

.clearfix{overflow:hidden;_zoom:1;}