一般的に使用される CSS フローティングメソッドの長所と短所の分析 (個人的な学習メモ)_html/css_WEB-ITnose

1. 問題ブリック（表示：ブロック）を投げて、まず現象を見る：

HTMLコード構造を分析する：

<div class="outer">    <div class="div1">1</div>    <div class="div2">2</div>    <div class="div3">3</div></div>

CSSコードスタイルを分析する：

リーリー

ここには最良の情報はありません。 外側の DIV.outer は高さを設定しますが、その内側の要素が浮動しない場合、外側の層の高さは自動的に拡張されることがわかっています。ただし、内部要素をフローティングにすると、以下のような影響が現れます:

(1): 背景が表示されない (2): 境界線が開けない (3): マージン設定値が正しく表示されない

内部要素がフローティングの場合、フローティングがオフになっていない場合、その時点でフローティング要素がドキュメント フローから分離されているため、その親要素にはフローティング内部要素が含まれなくなります。そのため、外側の層を伸ばして開くことはできません。 解決策は次のとおりです (他のコード例を使用してください):

1. 親 div は擬似クラスを定義します: after とzoom

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}.div1{width: 80px;height: 80px;background: red;float: left;}.div2{width: 80px;height: 80px;background: blue;float: left;}.div3{width: 80px;height: 80px;background: sienna;float: left;}

原則: IE8 以降でのみサポートされており、 IE 以外のブラウザ: 後、ズーム (属性を使用して変換された IE) は、ie6 と ie7 のフローティングの問題を解決できます。このうち、clear:both; はすべての float をクリアすることを指します。content: '.'; display:block; は FF/chrome/opera/IE8 では必須であり、content() は値を持つことも空にすることもできます。 Visibility:hidden; の機能は、ブラウザがそれを表示するだけでレンダリングできるようにすることで、明確なフローティングを実現できます。

長所: ブラウザのサポートが良好で、奇妙な問題が発生しにくい (現在: Tencent、NetEase、Sina などの大規模な Web サイトで使用されている)

短所: コードが多く、多くの初心者は原理を理解していない、 2 行のコードを組み合わせることでのみ、主流のブラウザーでサポートできるようになります

推奨事項: CSS コードを減らすためにパブリック クラスを定義することをお勧めします。 (空のラベルを閉じるフロートのメソッド コードと比較すると、まだ冗長性があるように見えます。クエリを通じて、Unicode 文字 (U+200B) に「幅ゼロのスペース」があることがわかりました。この文字自体は目に見えないため、省略することも検討できます。空の div を作成し、Float をクリアするために CSS によって改良された clear:both を使用すると、親 div が自動的に高さを取得できるようになります

長所: シンプル、コードが少なく、ブラウザのサポートが優れており、奇妙な問題が発生しにくい

短所: 初心者が多い原理を理解していない; ページにフローティング レイアウトがたくさんある場合は、空の div を大量に追加する必要があります。過去

評価: ★★★☆☆

3. 親 div を定義します overflow:hidden

<style type="text/css"> .div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD}      /*清除浮动代码*/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}   </style> <div class="div1 clearfloat"> <div class="left">Left</div> <div class="right">Right</div> </div><div class="div2"> div2 </div>

原則: width またはzoom:1 を定義する必要があり、overflow を使用する場合は高さは定義できません。 :hidden、ブラウザは自動的にフローティングエリアの高さをチェックします

長所: シンプル、コードが少なく、閲覧が簡単 デバイスのサポートが良好です

短所: サイズを超えると非表示になるため、位置とともに使用できません。オーバーフローする必要がある要素は表示できません

推奨:positionを使用したことがない、またはoverflow:hiddenを深く理解している友人にのみお勧めします

評価: ★★★☆☆

4. overflow:auto

<style type="text/css"> .div1{background:#000080;border:1px solid red} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD}      /*清除浮动代码*/ .clearfloat{clear:both}   </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div><div class="clearfloat"></div></div><div class="div2"> div2 </div>

原則: width またはzoom:1 を定義する必要があり、高さを定義することはできません。 overflow:auto を使用すると、ブラウザは自動的にフローティング領域の高さをチェックします

利点: シンプルで少ない。コード、優れたブラウザサポート

欠点: 内部の幅と高さが親 div を超えると、スクロール バーが表示されます。

推奨事項: 推奨されません。スクロール バーを表示する必要がある場合、またはコードにスクロール バーが表示されないようにする場合に使用してください。

評価: ★★☆☆☆

5. 親 div の高さを定義する

<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD}   </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div></div><div class="div2"> div2 </div>

原則: 親 div の高さを手動で定義すると、親 div が高さを自動的に取得できない問題が解決されます

利点 : コードは簡潔です

短所: 高さは固定されており、正確な高さを指定する必要があります。高さが親 div と異なる場合、問題が発生します。

推奨事項: 推奨されません。推奨 高さ固定レイアウトを使用する場合に使用します

評価: ★★☆☆☆