CSSフロート浮き現象と除去方法
絵を周囲のテキストの効果を達成するために：浮動元の定義と使用のシナリオをクリアする最初。
浮動外、テキストの折り返しを達成するために、現在、他の方法を除きます
浮動の具体的な定義で見てみましょう：
それは外側のエッジに遭遇または他のエッジは、ブロック浮動ボックスを含むまで、フローティングフレームを動き回ることができます。フローターは、フロートに属する文書、レイアウトの正常な流れに属していません。（：ノーマルストリーム、浮動及び絶対位置CSSは、3つの基本的なメカニズムを位置決め）
フロート要素は、ブロックレベルのフレームのレイアウトに影響を与えないであろう場合にのみインラインフレーム（通常テキスト）に影響を与えるに配置されている場合、フローティングフレームの高さ、ドキュメントは、ノーマルストリームに動作し、フローティングフレームが存在しません収容箱を超えると、ボックスを含むことも、自動的に延伸高いフローティング要素が閉じている（「沈胴高」現象）が発生しません。名前が示すように、それは雲のように、だけ出回っように、通常のストリームに浮くことです。
この機能はフローティングされていることを、内部ブロックは、他の要素なしノーマルストリームを含むため、その後、フローティング要素に属するノーマルストリームを引き起こし、また、0度の高い（崩壊の高さ）を示します。実際のレイアウトでは、多くの場合、箱は通常の高さを示した含めるように、浮動要素を閉じる必要があり、私たちが望むものではありません。
（次のように）クリアされないフローティング、ページが混乱の原因となります。
- フロート幅の値が設定されていない、要素の幅は、コンテンツの幅に応じて変化します
- 隣接する要素は、特に近隣の要素の後ろに隣接する要素に、影響を与えることになります。
隣人がある場合はブロックレベル要素は、我々は通常、結果を見たものである浮動ブロックボックスを無視します - Shidao限り同じ行の浮動要素と可能な限り自体は、屋根付きのフロートにつながります。divの幅を設定し、それらを含有するように、親要素の幅が十分なされない限り、このような兄弟は、ラップに強制されます。隣人がインライン要素であれば、フロートは、可能な限りの周りになります。
- 親要素は、親要素の取得失敗（フローティング要素の高さのためのない親要素、崩壊のすなわち高さ）の高さをフローティングすべての要素が設けられています。
透明フロート法を導入する前に、まず理解：BFCは何ですか？
ブロックレベルのレイアウトエレメントのための以下BFCと称するブロックフォーマットのコンテキスト（コンテキストブロックレベルフォーマット）、、。BFCは、要素が外部のレイアウトの要素の子要素には影響しません別の箱（HTMLでのボックスがそれを見ることができない）、同じ、外の要素である、それはその子要素には影響しません作成しました。
デフォルトによってのみルート要素（本体）ケースブロックレベルのコンテキスト、少なくとも一つの他の元素を満足BFCを形成するために、以下の条件：
float属性不为none
position属性不为static | relative
display属性为下列之一:table-cell | table-caption| inline-block | flex | inline-flex
overflow属性不为visible
fieldset元素 //fieldset标签将表单的信息进行分类
但是它们各自却有着不一样的表现：
display: table : 在响应式布局中会有问题
overflow: scroll : 可能会出现你不想要的滚动条
float: left: 使元素左浮动，并且其他元素对其环绕
overflow: hidden: 消除溢出部分テーブル自体はBFCを作成しませんが、それは匿名ボックス（匿名ボックス）を生成し、匿名ボックス表示：換言すれば、新しいBFCを作成する表のセルを、トリガーブロックレベルのフォーマットディスプレイなお、匿名ボックスではなく、ディスプレイの文脈：テーブル。だから、ディスプレイによって：テーブルと表示：作成したBFC効果テーブルセルは同じではありません。
BFC三つの特徴：
- BFCは、余白を防ぐことができますオーバーレイ
場合、ブロックレベルフォーマットのコンテキストで同じブロックに隣接する2つのブロックは、外部垂直距離を隔てオーバーレイが起こります。二つの隣接するブロックが同じブロックに属している言い換えれば、ブロックレベルフォーマット化文脈ではない、そうではないオーバーラップマージンを有するであろう。
- BFCの要素が重複していない浮動
規則によれば、ブロックレベルのフォーマットとコンテキストが重なり、その内部から境界要素外にすることはできません。ブラウザはブロックレベルフォーマット暗黙余白を作成し、スタックから外部要素を防ぐためにそれを浮遊するコンテキストを与えることが、この手段。システムは、浮遊次コンテキストにブロックレベルのフォーマットは、負のマージンを追加するには、この理由に起因動作しない場合
- BFCは、一般的に含んでいてもよいフローティング（即ち、BFCの高さを計算するときに、フローティング要素はまた、計算に関与しています）
独立したブロックレベルのコンテキストは浮力の流れをラップすることができ、すべてのサブ要素はそれほど明確フロートの高さまで保持していない、高さをブロックします浮動要素がカウントさ備えると言うことです崩壊へのコンテナの浮上が発生することはありません。しかし、通常のストリームに属するBFCながら、任意のドキュメント。
親要素は、新しいBFCを作成するには、閉じられたフロートかもしれ
BFCと関連する概念とフロートもあります。hasLayout
hasLayoutは、IE7すなわちプライベートな概念であると以前すなわちブラウザはBFCをサポートしていませんが、我々はBFCの効果を達成するためにie7,6 hasLayoutのブラウザに対応するルールを追加することができます！
要素のサイズと位置を制御するための概念を使用してレイアウトIE。偽| JavaScript関数は要素がhasLayoutレイアウト、真のリターンを持っているかどうかを確認するために使用することができます。レイアウトを持つ要素は、それ自身のサイズ及び位置を持つことになり、そうでない場合は、レイアウトを有する最も近い祖先要素のサイズおよび位置によって制御されます。
hasLayoutは読み取り専用のプロパティで、あなたが設定するJavascriptを使用することはできません。hasLayoutプロパティ要素がtrueの場合にリーチとBFC同様の効果。次のメソッドはhasLayoutが真である要素を作ることができます。
position: absolute
float: left | right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl
在IE7中使用overflow: hidden|scroll|auto
具体的な除去方法および浮動の長所と短所：
実際には、我々は実際に呼ばれるべき「透明フロート」を呼び出すために使用される「閉じられたフロート。」私たちが達成したい効果は、単に浮動取り除くのではなく、正確なクローズフロートを言うことです、単に削除浮き、コンテナの高さの崩壊の問題を解決しません。前と後（図は、除去効果を浮動:)
- クリアフロート：対応するワードがクリアされているクリア、対応するCSSプロパティに明確である：左|右|の両方|なし;
- クローズフロート：浮動要素のより正確な意味は、このように、浮遊がもたらすの影響を軽減、閉じられています。
要約すると、フロートを閉じる2つの方法があります。
タグプラス浮動要素の後ろに明確なピア：両方|左|右のプロパティ（次の方法のうちの1つ、2つ、3つ）
BFCの新要素（次の方法の4、5または6）
<style type="text/css">
.clearFloatDiv1 { width: 400px; border: 1px solid #00ffde;padding: 20px; }
.clearFloatDiv1 > div { width: 200px;padding: 25px 0; }
.clearFloatDiv1 > div:nth-child(1) { background: #0ef; }
.clearFloatDiv1 > div:nth-child(2) { background:#f7633d;}
.clearFloatDiv1 > p { width: 400px; padding: 15px 0;background: #fcebd1; }
</style>
<div class="clearFloatDiv1">
<div style="float: left;"></div> //浮动元素
<div style="float: left;"></div> //浮动元素
</div>
方法の一つ：浮動要素、プラス明確含むスタイル：両方の空のタグ
<div class="clearFloatDiv1">
<div style="float: left;"></div> //浮动元素
<div style="float: left;"></div> //浮动元素
<p style="clear:both;"></p> //加空标签，闭合浮动
</div>
長所：分かりやすく、把握に簡単に
短所：分離、ポストメンテナンスの構造や性能に反するが悪夢になり、意味のない空のラベルの多くを追加します。
方法2（推奨destroyが）：メソッドの後に：メソッドで最も高いといわれている（注：浮動要素における父親の役割）
原理：フローティング除去する方法、彼が使用する：後で：両方の特性：2つの内側の要素、ダミー明らかに添加元素にダミー素子を挿入する前に。そして、この方法に類似
.clearFloat { /*对IE6/7的兼容处理*/
zoom:1; /*触发 hasLayout*/
}
.clearFloat::after {
clear:both; /*指清除所有浮动*/
content:'.'; /*内容，可以为空。也可以用Unicode字符里的 “零宽度空格”，也就是U+200B，这个字符本身是不可见的，可以省略掉 visibility:hidden*/
display:block; /*对于FF/chrome/opera/IE8不能缺少*/
width: 0;
height: 0;
visibility:hidden; /*允许浏览器渲染它，但是不显示出来*/
}
<div class="clearFloatDiv1 **clearFloat** "> //加clearFloat清除浮动
<div style="float: left;"></div> //浮动元素
<div style="float: left;"></div> //浮动元素
</div>長所：良いブラウザのサポート、問題のせいにする傾向がありません（現在は次のような大規模なサイトを使用している、：テンセント、網易、シーナなど）
短所：コード以上の2つのコードは、主要なブラウザのサポートをするために組み合わせて使用します
方法3（差）：使用上のブロードラベルや属性自身のhtml
（透明フロートに対応：両方、フロート：左、フロート：右の影響）
<div class="clearFloatDiv1">
<div style="float: left;"></div>
<div style="float: left;"></div>
<br clear="all"/> //****闭合浮动
</div>長所：セマンティック少し先にヌルラベルモード、コードの量が少ないです
短所：分離の構造や性能にも反して、お勧めできません
方法4：親要素は、オーバーフローを定義：オート|隠された（：ズーム：そのような追加などの互換性のIE6、トリガーhasLayoutする必要がある、1）
<div class="clearFloatDiv1" style="overflow:auto;"> //新建BFC
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>隠された、自動車、目に見える：3つのオーバーフロープロパティの属性値があります。私たちは、フロートをクリアするためにhiddentと自動値を使用しますが、目に見える価値を使用しないように覚えています。これはSEOのはあまりにも友好的ではないために隠された、より親しみやすい自動SEOに言われています。
長所：シンプル、以下のコードでは、ブラウザが良いの欠点をサポートしています
短所：親のdivよりも内部の幅と高さ、スクロールバーが表示されます。
方法5（貧しい）：親要素も設定フロートフロート：左|右
<div class="clearFloatDiv1" **style="float: left;"**> //新建BFC
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>利点：構造と意味の問題が存在しない場合、コードの非常に少量
短所：親要素の隣接する要素のレイアウトはお勧めできません、常に身体に浮いていない、影響を受けることになる可能
方法6（差）：セットの親要素の表示：テーブル
<div class="clearFloatDiv1" **style="display: table;"**> //新建BFC
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>利点：完全な意味構造正しく、非常に少量
短所：ボックスモデルの属性が変更されている、これは良いよりも害を引き起こす可能性が一連の問題は、推奨されません