-ページレイアウト---
標準、デフォルトの方法に従って配置
フローティング、
修正済み
フローティング-フローティングを使用する理由:多くのレイアウト効果は標準ストリーミングでは実行できないため
1.行に配置された3つのdivを実現する方法
2. 2つのボックスの左揃えと右揃えを実現する方法
フローティングとは何ですか?
フローティングボックスを作成するために使用し、左端または右端が包含ブロックまたは別のフローティングボックスに触れるまで、ボックスを横に移動します
フローティング特性
1.フローティングエレメントが標準ストリームから外れている---標準から外れている-元の位置を保持しておらず、位置は他の標準ストリームによって占められている
2.複数のボックスがフロートに設定されている場合、それらは属性値に従って行に表示され、上部に配置されます
フローティング要素は互いに近接しています(ギャップはありません)。親の幅がこれらのフローティングボックスに収まらない場合、余分なボックスは新しい行に配置されます
3.フローティング要素には、インラインブロック要素の特性があります。
ブロックレベルのボックスの幅が設定されていない場合、デフォルトの幅は親と同じですが、フロートを追加した後、そのサイズはコンテンツに従って決定されます
フローティング戦略
1.フローティング要素は、標準ストリームの親要素と組み合わせて使用されることがよくあります。
一般的なWebページのレイアウト
フロートをクリアする理由
---親ボックスの高さは固定されていません。子ボックスの高さは親ボックスと同じくらい高くなります(親ボックスが高さを与えるのに不都合な場合があるため)
----親ボックスに高さがない場合、フロートはスペースを占有せず、親は子の高さを見つけることができないため、親ボックスの高さは浮動後0になります。
クリア:左/右/両方//フロートをクリア
1.追加のラベルメソッド-空のブロックレベル要素を追加
2.オーバーフロー属性を親に追加します
3.親がafter疑似要素を追加する
4.親が二重の疑似要素を追加する