最近、知識に基づいてブログの更新のシリーズは、統合され、再コーミングします。
、位置測位
（A）：プロパティの位置
1.absolute：要素絶対位置を生成し、親要素に対しては見つけるに最も近いものを見つける静的ではありません。
2.relative：その位置通常の文書位置決めストリームに対して、反対側に位置する要素を生成するステップと
3.static：デフォルト、何位置決め要素は、文書の通常の流れの中で表示されません。
4.fixed：スクロールバーが表示されたら、古いIEは、サポート、および絶対的な一貫性、窓に対して位置決めしない、とスクロールせずにスクロール。
5.sticky：（CSS3）互換性の問題、それは、固定された相対的なフィットこのような場合に、スクロール画面が固定された外側として現れる画面レイアウトにおいて従来のフロー、。プロパティのパフォーマンスは、あなたが実際に見吸着効果です。
（B）：で一般の使用による位置
1. 100％DIVのデフォルト幅がある場合は、絶対絶対位置と組み合わせた場合に、直ちに要素のインラインブロックは、内部幅適応要素は、ページの幅と高さの崩壊を引き起こす可能性がデフォルト設定されます。
これにより、時には簡単な方法の理由から、一般的なページレイアウトの柔軟性絶対絶対位置、へ2.乱用の絶対/相対/トップ/左/ z屈折率を引き起こす可能性がある、それはトラブルを引き起こすの拡張や保守の後半であろう
（C）：位置コードサンプル
1.relative相対位置。
オブジェクト独自の原稿流位置に対して2、そしてまた配列、のみ視覚的変化の相対位置をダウン継続する元の位置に応じて、黄色のブロック以下、ドキュメントフローを占めます。
<スタイル>
本体{色：#FFF;}
.aa {幅：400ピクセル;マージン：0自動;ボーダー：2ピクセル固体＃000;高さ：400ピクセル}
＃1 POSITION1 {高さ：100pxに、背景：緑;}
＃1 POSITION2 {高さ：100pxに、背景：青;位置：相対;トップ：10pxの;左：は50px;}
＃1 POSITION3 {高さ：100pxに、背景：黄色;色：＃000} </スタイル> <body> <DIV CLASS = "AA">
<DIV ID = "POSITION1"> 对象 1 </ div>
<DIV ID = "POSITION2"> 对象 2 </ div>
<DIV ID = "POSITION3"> 对象 3 </ div> </ div>
</ BODY>
2.absolute絶対位置
オブジェクトの親DIVに対して1absolutプロパティは、文書の流れの上に、通常の流れ、崩壊幅と高さからずれます。
<スタイル>
本体{色：#FFF;}
.aa {幅：400ピクセル;マージン：0自動;ボーダー：2ピクセル固体＃000;高さ：400ピクセル;位置：相対;}
＃1 POSITION1 {高さ：100pxに、背景：緑;位置：絶対;トップ：10pxの;左：は50px。}
＃1 POSITION2 {高さ：100pxに、背景：青;}
＃1 POSITION3 {高さ：100pxに、背景：黄色;色：＃000} </スタイル> </ head> <body> <DIV CLASS = "AA">
<DIV ID = "POSITION1"> 对象 1 </ div>
<DIV ID = "POSITION2"> 对象 2 </ div>
<DIV ID = "POSITION3"> 对象 3 </ div> </ div>
二、フロートフロート
（A）フロートの定義
浮動要素は、属性が右/左方向を定義するフロート。浮動要素は関係なく、どのような要素自体の、ブロックレベルボックスを生成します。
フロートの値：左/右/なし
（B）フロート実装テキストの折り返し
素子は、フローティング要素と属性を作ることができるカプセル化されたのインラインブロックを、ブロック要素は、そのような要素とインライン要素の利点ことを合併。フローティング要素と属性の標準フロート要素が正常ブロック浮上の流出、標準レイアウトストリームから配置され、それでも通常のテキスト文書流通空間を占める、このような浮動素子スペースの後のテキストに加えていることであろうこれは、参照配列、囲まれたテキストを形成する効果です。
<スタイル>
.A {幅：200pxの、高さ400ピクセル;マージン：0自動;ボーダー：1ピクセル固体＃000;}
.PIC {フロート：左;}
P {フォントサイズ：16pxに、行の高さ：18px;フォントファミリ： "微軟雅黒"} </スタイル> </ HEAD> <BODY> <DIV CLASS = "A">
<IMG SRC = "2.JPG" 幅= "100" 幅= "100" クラス= "PIC">
<P> これは、テストテキストラララこれはこれはこれでテキスト表示ラララNA NA NA NAテキスト表示ですああああああテスト用のテキストです。</ P> </ div>
（III）フロートフローティングレイアウト
下順に上から標準文書フロー。
DIV1左フロート後、それが崩壊、およびDIV2のDIV3のDIV1とオーバーラップの高さが明らかです。
（D）は、フローティングと浮動クリアするいくつかの方法をクリアしたいのはなぜ
浮動要素の高さは、副作用の崩壊を引き起こすので、親は、ボックスフレームを軟化することができない背景が表示できない、との親子マージンとパディングの設定値を正しく表示することができません。
<スタイル>
.div1 {幅：400ピクセル;ボーダー：2ピクセル固体＃000;}
.div2 {幅100ピクセル、高さ100ピクセル、背景：青;フロート：左;}
.div3 {幅100ピクセル、高さ100ピクセル、背景：緑;フロート：右;} </スタイル> </ head> <body> <DIV CLASS = "DIV1">
<DIV CLASS = "DIV2"> DIV2 </ div>
<DIV CLASS = "DIV3"> DIV3 </ div> </ div>
方法 1：親の終了前に、サブタグを追加するには、<divのスタイル=「クリア：両方を ;」> </ div>
<DIV CLASS = "DIV1">
<DIV CLASS = "DIV2"> DIV2 </ div>
<DIV CLASS = "DIV3"> DIV3 </ div>
<divのスタイル= "クリア：両方;"> </ div> </ div>
方法 2：CSS属性がオーバーフローを追加親で：隠された;ズーム：1;またはオーバーフロー：自動;ズーム：1。
方法 3：方法同様の原理クリア後：両方、CSS方式と：ズーム+持つ親で両方の要素ブロック：明確な内部要素を追加した後
.box1 {ズーム：1;}
.box1：{表示後：ブロック。内容：「クリア」。クリア：両方; 行の高さ：0; 可視性：隠されました;}
方法 4：親が直接適切な高さに配置された伸延
（V）フロートとJavaScript
IEブラウザ：
obj.style.styleFloat =「左」。
その他のブラウザ：
obj.style.cssFloat =「左」。
参考： https://www.cnblogs.com/huanqiuxuexiji/p/9063338.html