まず
、標準ストリームcssには、標準ドキュメントストリームから要素を作成する3つの方法があることを理解しましょう
。1）フローティング
2）絶対ポジショニング
3）固定ポジショニング
標準ストリームはドキュメントストリームとも呼ばれます。それは特別な要素のcss配置規則の配置規則に依存しません。
標準ストリームの特徴：
-
空白の折り畳み現象：たとえば、imgタグ間にギャップが必要ない場合は、しっかりと接続する必要があります。
<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" /> -
内容が不均一で、下部が揃っています。
-
自動折り返し
floatは、CSSのレイアウトで最もよく使用される属性です
。2つの要素が並んでいて、コードが添付されています：box1
{ float：left; width：300px; height：400px; background-color：yellowgreen; } .box2 { フロート：左;幅：400px;高さ：400px;背景色：スカイブルー; }
フローティングを上手に学びたいのなら、3つの特性を知っている必要があります。
1.フローティング要素は標準外です
証明1：
.box1 { float：left; width：100px; height：100px; background-color：yellowgreen; } .box2 { width：300px; height：300px; / * float：left; * /背景色：スカイブルー; }
Box1はドキュメントフローから分離され、box2にオーバーレイされます。
証明2：
幅と高さを設定するために、スパンタグをブロックレベルの要素に変換する必要はありません。つまり、すべてのタグが行とブロックを区別しなくなったことを証明できます。つまり、要素が浮くと、要素を並べて配置できるようになり、幅と高さを設定できます。元々はdivかspanか。
span { float：left; width：200px; height：200px; background-color：orange; } 2.フローティング要素が互いにくっつく十分なスペースがある場合、box2兄弟にもたれかかります。十分なスペースがない場合は、ボックス1の兄に寄りかかります。ボックス1に寄りかかるのに十分なスペースがない場合は、自分で左の壁に移動します。3.フローティング要素には「文字を囲む」効果があります。4。フローティング要素は縮小します。フローティング要素に幅が設定されていない場合、テキストの幅に自動的に縮小されます（これはインライン要素と非常によく似ています）。
.box1{
float: left;
/* width: 300px;
height: 400px; 没有设置宽高度*/
background-color: yellowgreen;
}
.box2{
float: left;
width: 100px;
height: 100px;
background-color: skyblue;
}
.box3{
float: left;
width: 300px;
height: 300px;
background-color: darkblue;
}
次はフローティングの鍵です：フローティングのクリア：
現在2つのdivがあり、divに属性はありません。各divにはliがあり、これらのliはすべてフローティングです。
<div class="main">
<div class="box1">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>vue</li>
</ul>
</div>
<div class="box2">
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>物理</li>
</ul>
</div>
</div>
これらのliは2行に分割されると考えましたが、2番目のグループの最初のliは、最初のグループの最後のliにアタッチされていました。
その理由は、親要素に高さが設定されておらず、フローティングの子にコンテナを与えることができないためです。
フロートをクリアする方法1：父親の高さを設定します。
フロートが高さのあるボックス内にある限り、フロートは後続のフローティング要素に影響を与えません。つまり、フローティングの影響を取り除くことです。
クリアフローティングメソッド2：clear：both;
clear：both;が最も一般的なメソッドです。
Webページの作成では、高さが表示されることはめったにありません。高さを書き留めると、コンテンツが多すぎるとページがめちゃくちゃになるからです。バックエンドの担当者によって叱られて死にます。
誰かが高さを書かずにフロートをクリアすることが可能かどうか尋ねましたか？フロートが互いに影響を与えないようにしますか？
.main ul li{
float: left;
background: red;
list-style: none;
}
.main div{
/* height: 50px; */
border: 1px solid salmon;
}
.box2{
clear: both;
margin-top: 5px;
}
明確：両方;スタイルがbox2に追加され、効果は次のとおりです。
この方法には非常に大きくて致命的な問題があり、マージンは失敗します。
クリアフローティングスリー：隔壁法
<div class="main">
<div class="box1">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>vue</li>
</ul>
</div>
<divc class="h20"></div>
<div class="box2">
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>物理</li>
</ul>
</div>
</div>
中央にdivを追加して、2つのdiv間の距離として開き、フロートをクリアします。
.h20{
height: 20px;
clear: both;
}
近年、内壁工法があります
<div class="box1">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>vue</li>
<div class="clear"></div>
</ul>
</div>
.clear{
clear: both;
}
float要素の下に別のクラスを追加してfloatをクリアします。このようにして、親の取り消し線形式も息子がサポートでき、フローティングの影響も排除されます。（私が最もよく使用するもの）
フロート3をクリアします：オーバーフロー：非表示;
オーバーフロー：非表示;元々はオーバーフロー非表示を意味していました。
また、父親が一人で浮かぶことができない息子の問題を解決し、高さを維持するために使用することもできます。ただし、overflow：hidden;を浮動要素の父に追加する限り、父は息子によってより高くプッシュされる可能性があります。これは家庭薬です。
この現象は説明できませんが、ブラウザの小さな解決策です。そして、オーバーフロー：非表示;マージンを有効にすることができます。