フローティングとポジショニング
フロート
何が浮いていますか？
フロート属性は、通常のストリームから基準を制御してもよい提供フローティング要素を意味し、プロセスは、指定された位置で親要素に移動します。これは、任意の行ボックスは、レイアウトに浮遊するように配置することができる可能にします。
次のようにCSSで、浮動フロートプロパティによって定義され、基本的な構文は次のとおりです。
选择器{float:属性值;}| プロパティ値 | 説明 |
|---|---|
| 左 | 左浮動要素 |
| 右 | 要素は右にフロート |
| 無し | 要素がフロートしていない（デフォルト） |
浮動プロパティ
標準の流れからは、唯一のフロートを浮動については、場所を占めていません
限りフローティングの一般的な概念は、一般に、ブロックレベルの包含を作成するように外側に親ボックスを追加し、整列し、そのパディングを超えません
フローティング要素は上部と整列される場合、フローは、標準的な要素である場合、垂直に配置されています
目的：ブロック要素の複数を作製するためには、行に表示されてもよいです
クリアフロート
なぜ浮動削除しますか？
浮いた要素は、元の文書ストリームの魚の位置を取ることはありませんので、それは背後にあるレイアウト要素に影響しますので、これらの問題を解決するために、あなたは浮動要素を削除する必要があります
フロート明確な結果の後に正確ではなく、明確なインパクトフロート
クリアフロートその性質
子供浮動高さが内部的な問題が発生したため、親の主な要素を解決するためにクリアフロート0
父はボックスの高さが軟化されることはありませんボックスを与えていません
対策：
構文は次のとおりです。まず、CSSで、クリアをクリアフロート属性：
选择器{clear:属性值;}| プロパティ値 | 説明 |
|---|---|
| 左 | フローティング要素が左側に許可されていない（左側掃気フローティング） |
| 右 | 右側の要素を浮動許可していません（右側掃気の浮動） |
| 両方 | 効果は、右と左浮動両方をクリア |
第二に、追加のラベル
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style="clear:both"></div>，或则其他标签br等亦可。貧しい構造多くの無意味なラベルを追加し、お勧めできません
第三に、親メソッドは、overflowプロパティを追加します
BFCによってトリガ、明確な浮遊効果を達成することができます
给父级添加： overflow为 hidden|auto|scroll 都可以实现利点：簡潔なコード
⭐️短所：簡単にオーバーフローする必要があり、時間の含有量の増加につながる隠さするコンテンツをラップするためにつながらない、要素を表示することはできません。
次の二つは明らかではありません
擬似要素の後に透明フロートの使用
：メソッドは空の要素のバージョンアップされた後、利益が個別に標識されていません
どのように使用するには：
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */長所：閉じたフローティング構造に沿って、正しい意味を考えました
短所：IE6-7はサポートしていませんので：1トリガーhasLayout：の後に、ズームを使用しています。
代表のWebサイト：Baiduは、淘宝網、網易、
注意：コンテンツを：小さな点や他との可能な限りの内部では、空でないようにしよう、そうでない場合はFirefoxバージョン7.0より前にスペースが生成されます「」。
第五に、前と浮動クリアした後、ダブルダミー要素の使用
どのように使用するには：
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}長所：コードより簡潔
短所：IE6-7はサポートしていませんので：1トリガーhasLayout：の後に、ズームを使用しています。
代表のWebサイト：キビ、テンセントなど
見つけます
要素の属性は、測位モード二つオフセット縁部を位置決め含みます
エッジバイアス
| エッジオフセット性 | 説明 |
|---|---|
| 上 | 上端から親要素の要素の定義に対してオフセット |
| 底 | 親要素の縁下要素に対して底オフセット、定義された距離 |
| 左 | 親要素の左端から要素の定義に対して、オフセット左 |
| 右 | 右オフセット、要素が親ラインから右に関して定義されます |
;左100pxに：モードを配置し、このような上部と一致するようにオフセットした後、その側30px;等
位置決めモード
次のようにCSSでは、位置が位置決めモードのための要素を定義する属性、基本的な構文は次のとおりです。
选择器{position:属性值;}の共通のpositionプロパティ
| 値 | 説明 |
|---|---|
| 静的 | 自動位置決め（デフォルトターゲティング） |
| 相対 | ドキュメントフローを位置決めするための元の位置に対する相対位置 |
| 絶対の | 親に対する絶対位置は、位置要素上に配置されています |
| 一定 | 固定的に配置するために、ブラウザのウィンドウに相対的位置 |
ここではそのモードの理解を拡大します
相対位置決め相対：
位置プロパティの値は、要素が対向して配置することができ、相対的である場合の要素の相対的な位置決めは、ストリームの基準位置に対して位置決めされ
それは、その位置を変更することができますが、それはまだドキュメントフローの位置に留まっているが、
注意：
- 相対的な位置は、最も重要な点は、それがエッジの位置を移動させることによって相殺することができるということであるが、元の占める位置は、占有し続けています。
- 第二に、左上隅の位置を移動するたびに、ベース点モバイル（移動するように自身を位置に対して）であります
主な目的は彼のショーの複数の浮動ブロックレベル要素を許可している場合、メインの値は、モバイル位置決め位置で、私たちは行きたい位置にボックスをしましょう。
絶対位置、絶対
絶対配置は、完全/位置を占め、それは完全にスケールから外れている、オフセットエッジによって達成されます。
まず、親要素が位置合わせされていない場合は、対象のブラウザを置きます
第二に、絶対配置は、最近要素に基づいて、親要素（祖先）位置（絶対、固定または相対位置）に配置されています。
Zaijuefuxiang
これが私たちの学習目標式は、常に覚えています
以下の結論：
子供は絶対位置であるため、1、、それはボックス内の任意の場所の父親を配置することができ、位置を占めていません。
2、親ボックスのレイアウトは、あなたは父が唯一の相対的な位置決めできるように、位置を占めるように必要がある場合。
これは、子必見母相の起源です。
絶対測位センターボックス（水平/垂直）
図1に示すように、第1の左：50％;親ボックスの半分のサイズ
2、その後、負のマージンの値を自分の半分はマージン左することができ
固定位置は、固定されました
要素が固定位置を設定するときは、ブラウザのウィンドウに応じて、独自の表示位置を定義するために、常にコントロールの標準的なドキュメントフローのスピンアウト、となります。かかわらずにかかわらず、ブラウザウィンドウのサイズが変更さは、要素は常にブラウザウィンドウに固定された位置を表示する方法をスクロールするには、ブラウザのスクロールバーの
IE6や他のブラウザの次のバージョンでは、固定されたポジショニングをサポートしていません。
Z-indexがオーダー
例えば：Zインデックス：2。
注意：
- デフォルト属性は、要素は、ホーム上に積層された素子に配置され、z屈折率が値0、大きい値。
- 値は、背後からの書き込み順序に従って、同じである場合。
- 数字の後ろにユニットを追加することはできません。
- 唯一の相対位置、絶対位置は、固定された位置は、標準的なフローの残りの部分を、この特性を有し、フローティング、静的な位置決めはそのような特性ではなく、また、このプロパティを指定することはできません。
位置決めモード変換
フローティング要素が絶対位置決め追加し、固定された位置決め要素のモード変換が起こる後のような、それは、インラインブロックモードに変換され
したがって、例えば、線要素を絶対位置または固定位置を浮遊後に添加された場合、モード変換ができない、直接缶高さと幅