【ページレイアウト方法】

-ページレイアウト---
    標準、デフォルトの方法に従って配置
    フローティング、
    修正済み

    フローティング-フローティングを使用する理由:多くのレイアウト効果は標準ストリーミングでは実行できないため
    1.行に配置された3つのdivを実現する方法
    2. 2つのボックスの左揃えと右揃えを実現する方法
    フローティングとは何ですか?
    フローティングボックスを作成するために使用し、左端または右端が包含ブロックまたは別のフローティングボックスに触れるまで、ボックスを横に移動します

    フローティング特性
    1.フローティングエレメントが標準ストリームから外れている---標準から外れている-元の位置を保持しておらず、位置は他の標準ストリームによって占められている
    2.複数のボックスがフロートに設定されている場合、それらは属性値に従って行に表示され、上部に配置されます
    フローティング要素は互いに近接しています(ギャップはありません)。親の幅がこれらのフローティングボックスに収まらない場合、余分なボックスは新しい行に配置されます
    3.フローティング要素には、インラインブロック要素の特性があります。
    ブロックレベルのボックスの幅が設定されていない場合、デフォルトの幅は親と同じですが、フロートを追加した後、そのサイズはコンテンツに従って決定されます

    フローティング戦略
    1.フローティング要素は、標準ストリームの親要素と組み合わせて使用​​されることがよくあります。

    一般的なWebページのレイアウト

    フロートをクリアする理由
    ---親ボックスの高さは固定されていません。子ボックスの高さは親ボックスと同じくらい高くなります(親ボックスが高さを与えるのに不都合な場合があるため)

    ----親ボックスに高さがない場合、フロートはスペースを占有せず、親は子の高さを見つけることができないため、親ボックスの高さは浮動後0になります。

    クリア:左/右/両方//フロートをクリア

    1.追加のラベルメソッド-空のブロックレベル要素を追加

2.オーバーフロー属性を親に追加します

3.親がafter疑似要素を追加する

 

 4.親が二重の疑似要素を追加する

 

 

おすすめ

転載: www.cnblogs.com/QQ-lala/p/12707632.html