ホームページ > 記事 > ウェブフロントエンド > DIV+CSS_html/css_WEB-ITnose のフローティングを解消する 7 つのメソッドの分析
DIV+CSS_html/css_WEB-ITnose のフローティングを解消する 7 つのメソッドの分析
- WBOYオリジナル
- 2016-06-24 12:30:04985ブラウズ
http://www.coolhtml.cn/div+css/2009-11-03/DIV%20+%20CSS-floating-Analysis7.html
SS クリアフローティングは、ページを作成するすべての人が直面する問題です。遭遇 誰もが遭遇したことがあるものですが、誰もがそれを明確に知り、完全に理解できますか？なので、時間ができたらすぐにこのような記事を書きました。すべてをカバーすることはできませんが、基本的に私が知っていることはみんなに教えることができます。
float をクリアするメソッドがどれくらいあるか、大まかに見てみましょう (IE でのzoom:1 の使用については書きませんが、次のトピックで書きます)。対応するデモ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8"><head><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><meta name="robots" content="all" /><meta name="Description" content="CSS Web Design 我爱CSS-Web标准化 Div+css教程" /><meta name="Keywords" content="我爱CSS,Web标准化,Div+css教程" /><title>CSS经验分享：看看清除浮动的方法一共有多少种 - CSS Web Design 我爱CSS-Web标准化 Div+css教程</title><style type="text/css">/*<![CDATA[*/ul { list-style:none; margin:0; padding:0; background-color:#A9CE78;}li { float:left; width:40px; height:40px; background-color:#66C7F7; padding:5px; margin-right:2px; color:#FFF; font-family:"Arial Black";}.demo { width:800px;}.demo div { border:2px solid #FF6767; background:#FF6767; margin-bottom:5px;}#after ul{ zoom:1;}#after ul:after { content:""; display:block; height:0; line-height:0; clear:both; visibility:hidden;}#afterout div:after { content:""; display:block; height:0; line-height:0; clear:both; visibility:hidden;}h1 { color:#66C7F7; font-family:"Arial Black"; margin:0; padding:0; font-size:20px; clear:both;}h2 { color:#66C7F7; font-family:"Arial Black"; margin:0; padding:0; font-size:16px; clear:both;}#brcssclear div{ zoom:1;}#brpropertyclear div{ zoom:1;}#cssoverflowauto ul { overflow:auto; zoom:1;}#cssoverflowhidden ul { overflow:hidden; zoom:1;}#cssdisplaytable ul { display:table; zoom:1;}#cssoverflowautoout div{ overflow:auto; zoom:1;}#cssoverflowhiddenout div{ overflow:hidden; zoom:1;}#cssdisplaytableout div{ display:table; zoom:1;}.cleardiv{ zoom:1;}#brcssclear br.clear,#divcssclear div.clear{ clear:both; height:0; line-height:0; margin:0; padding:0; border:0; overflow:hidden;}/*]]>*/</style></head><body><h1>Cealr Fix Layout</h1><div id="after" class="demo"> <h2>Css :after</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="cssoverflowauto" class="demo"> <h2>Css overflow:auto</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="cssoverflowhidden" class="demo"> <h2>Css overflow:hidden</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="cssdisplaytable" class="demo"> <h2>Css display:table</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="divcssclear" class="demo"> <h2>Div css clear</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <div class="clear"></div> </div></div><div id="brcssclear" class="demo"> <h2>Br css clear</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <br class="clear" /> </div></div><div id="brpropertyclear" class="demo"> <h2>Br property clear</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <br clear="all" /> </div></div><div id="normal" class="demo"> <h2>Normal</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="afterout" class="demo"> <h2>Css :after out</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="cssoverflowautoout" class="demo"> <h2>Css overflow:auto out</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="cssoverflowhiddenout" class="demo"> <h2>Css overflow:hidden out</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="cssdisplaytableout" class="demo"> <h2>Css display:table out</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div></body></html> 1. pseudo-class:after を使用して、後続の空のコントロールのために高さ 0 の疑似クラス層をクリアします
2. CSS overflow:auto を使用して高さをサポートします
3. CSS オーバーフローを使用します。 hidden 奇妙な適応を生成します
4. display:tableを使用してオブジェクトを表形式にします
5. divタグとcssのclear属性を使用します
6. brタグとcssのclear属性を使用します
7. brを使用しますタグとそれ自体 HTML の Clear 属性
一見すると、どちらも問題を解決できますが、一方で、それぞれに長所と短所があります。 (一対一対応)
1. アドバンテージ構造のセマンティクスは完全に正しく、その他の奇妙な問題は発生しません。
短所 不適切な再利用方法は、コード量の急激な増加につながりやすいです。
最外層が軽く浮いている場合や、モジュール再利用方法を理解している方に使用することをお勧めします。
2. 利点: セマンティック構造は完全に正しく、コードの量は非常に少ないです。
欠点: 複数のネストの後、最も外側の軽いフローティング ボックスをクリックすると、最も外側のレイヤーから最も内側のレイヤーまでのすべてのコンテンツが選択されます (FF)。または、マウスオーバーにより幅が変更されると、最も外側のモジュールにスクロール バー (IE)。
モジュールを 1 つの内で使用することをお勧めします。ネストしないでください。
3. アドバンテージ構造は完全にセマンティックであり、コードの量は非常に少ないです。
デメリット コンテンツが増えると自動的に行が折り返されコンテンツが非表示になりやすい。
幅が固定されている場合に使用することをお勧めします。ネストしないでください。
4. アドバンテージ構造は完全にセマンティックであり、コードの量は非常に少ないです。
欠点ボックスモデルの性質が変更されている 数え切れないほどの奇妙な出来事があることが考えられます。
バグを修正して自分を殺したくなければ、使用しないことをお勧めします。ただし、アルファ版ではテスト用の一時的な欺瞞として使用できます。
5. 利点: コードの量が非常に少なく、再利用性が非常に高いです。
欠点: セマンティクスに完全に適応することはできず、改訂や変更の要求には役立ちません。
初心者におすすめで、浮いている問題を素早く解決できます。
6. 利点: 5 番目のケースよりもセマンティクスの程度が優れており、コードの量が非常に少なく、再利用性が非常に高くなります。
欠点: セマンティクスはまだ完全ではないため、改訂や変更の要求にはつながりません。
初心者におすすめで、浮いている問題を素早く解決できます。
7. 利点: セマンティクスの程度はケース 5 および 6 よりも優れており、コードの量は最小限であり、再利用性が非常に高くなります。
欠点: セマンティクスはまだ完全ではないため、改訂や変更の要求にはつながりません。
初心者が思考をアップグレードするときにこれを使用するようにガイドすることをお勧めします。これにより、パフォーマンスを制御するためにクラス名を使用する代わりに、Web ページの WEB1.0 時代に戻り、HTML 属性を直接使用して制御する方が良いことを理解できます。結局のところ、後者の方がコードが少なくなります。