5

私たちはHTMLをよりセマンティックにしようとしていますが、プレゼンテーションに関係するHTMLに残っているように見えることの1つは

<div class="clear"></div>

たとえば、次のセマンティックhtmlがある場合：

<div class="widgetRow">
    <div class="headerInfo">My header info</div>
    <div class="widgetPricing">$20 to $30</div>
    <div class="footerInfo">My footer info</div>
</div>

そして、headerInfoとfooterInfoの両方がCSSで左にフロートされ、widgetPricingが右にフロートされています（例として）。

質問：

私のwidgetRowdivには高さや幅がありません。<div class="clear"></div>.footerInfoの直後に追加するのは間違っていますか？その時点では、私はセマンティックではないようです。

より一般的な質問

セマンティックHTMLを作成する場合、フロートをクリアすることが唯一の仕事であるdivをHTMLに入れても大丈夫ですか？

4

5 に答える 5

7

フロートをクリアする方法はいくつかあります。

1。CSS pseudo：afterクラスを使用する

.container:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }

コンテナクラスを「widgetRow」divに適用します。このアプローチはおそらく最もセマンティックですが、すべてのブラウザー、特にIE7以下でサポートされているわけではありません。：afterのブラウザサポート

2。オーバーフロー：自動またはオーバーフロー：非表示を使用します

.container { overflow:auto; }
.container { overflow:hidden; }

ここでも、コンテナクラスを「widgetRow」divに適用します。このアプローチはもう少し意味論的かもしれませんが、特に小さなディスプレイで見たときに、あなたを噛むようになる可能性もあります。overlay：autoは水平スクロールバーをトリガーし、overflow：hiddenは要素をまとめて非表示にすることができます。フロートをクリアするためにoveflowを使用する際の問題

3。clear：bothを使用する

.clear { clear:both; }

これは、クリアクラスが上記のようなものであると想定して使用しているアプローチです。これは私が知っている唯一のアプローチであり、すべてのブラウザで互換性があり、望ましくない副作用をもたらすことはありません。ですから、あなたがサポートしているブラウザにもよりますが、私はおそらくあなたが持っているものに固執するでしょう。

于 2012-09-20T15:06:52.990 に答える
2

いいえ。視覚的/スタイリングの目的でのみ導入された空のマークアップは避ける必要があります（ページの管理/拡大縮小も困難になります）

代わりに、 easyclearing （H5BPでも使用）などの非構造的なクリア方法を使用して、フロートラッパーにスタイルを追加することもできます。

于 2012-09-20T14:36:33.447 に答える
0

素晴らしいclearfixハックを使ってみましたか？この方法で、冗長で非セマンティックな空の要素を追加する必要はありません。

より一般的な質問に答えるために-いいえ、レイアウトの目的で空の要素を追加することは意味的に有効ではありません。<div>ただし、空のタグがいくつかあれば、誰も怪我をすることはありません。:)

于 2012-09-20T14:34:12.243 に答える
0

フロートをクリアするために私が知っている3つの基本的な方法があります。

  1. clear:both;指定したようなもの でdivを空にします。
  2. overflow: auto親divにCSSプロパティを追加します。
  3. CSS疑似セレクターを使用して、要素の後に要素を導入し、その上のフロートをクリアします。

これらの長所と短所

空のDiv

プロ

  • ブラウザで広くサポートされています。
  • 副作用はありません。

短所

  • フロートをクリアするためだけに追加のマークアップを追加します。
  • 多くの人が、これは意味論的ではないと主張しています。

オーバーフロー

プロ

  • 追加のマークアップはありません。

短所

  • 特定の場合に不要なスクロールバーをトリガーする可能性があります。
  • オーバーフローオートは、フロートをクリアするというこの特定の目的に使用することを実際には意図していませんでした。

疑似セレクター

プロ

  • 追加のマークアップはありません。
  • 他の方法、imoよりもエレガントです。

短所

  • ie7以下ではサポートされていません。
于 2012-09-20T15:01:38.690 に答える
0

上記の優れた回答の一部として、もう1つのアプローチを追加します。

4. display：inline-block + vertical-align：topを使用します

http://www.quirksmode.org/css/display.htmlによると、これも特にIE7以前では扱いにくい場合があります。

IE 6/7は、自然に表示される要素の値のみを受け入れます：インライン

現在広くサポートされており、特定の要素についてはIE6 / 7でも機能し、フローティング要素と同じ効果を実現しますが、クリアの問題はありません。場合によっては、ネイティブのインライン要素を使用するために、マークアップにわずかな変更を加えることもできます（これはセマンティックのままです）。ハックはIEにのみ使用することもできます。IE7が表示を理解しないを参照してください：インラインブロック

Anex：オーバーフローに関する別の考えられる問題：hidden

私が最近経験したoverflow：hiddenアプローチのもう1つの欠点は、overflow：hidden要素内で絶対位置の要素を使用する場合、それらはコンテナーによってトリミングされます。したがって、たとえば、CSSドロップダウンメニューはうまく機能しません。

于 2012-10-30T15:02:45.483 に答える