どこでもブロックをクリアする必要がある場合、テーブルレス設計の利点は何ですか？

StackOverflow https://stackoverflow.com/questions/407420

  •  03-07-2019
  •  | 
  •  

質問

セマンティックであるため、<div>から<table>タグに向かって移動するという目標は理にかなっていることを理解しています。ただし、列ベースのレイアウトを機能させるためにまだクリアブロックが必要な場合に得られる利点はわかりません。例：

<!-- Note: location-info & personal-info both float left. -->
<div class="contact"> 
    <div class="personal-info">
        <p>
           Shawn, etc, etc
        </p>
    </div>
    <div class="location-info">
        <p><address>etc</address></p>
    </div>
    <br style="clear:both" /> <!-- clearing block -->
 </div>

余分な<br>タグは、スタイルを厳密に記述するために使用され、レイアウトを機能させるために必要です。これは、テーブルを削除することによって得られるすべての利点を台無しにしませんか？

役に立ちましたか？

解決

あなた していない クリアブロックが必要ですか？

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

.clear-block {
    display: inline-block;
}
<div id="wrapper" class="clear-block">
    <div style="float:right">
        Your content here
    </div>
    <div style="float:left">
        More content here
    </div>
</div>

JSFiddle

他のヒント

表形式のデータを表示している場合、多くの浮動divよりもテーブルを使用する方が意味があります。賢明に使用しているツールを使用してください。テーブルが最良のオプションである場合、盲目的にCSSを使用しないでください。

  

セマンティックであるため、<div>から<table>タグに向かって移動するという目標は理にかなっていることを理解しています。

実際には、まったく逆です。<span>から<div class='float-left'>に移動すると、HTMLのセマンティックが less になります。実際、 <div id='bottom'> （および <div class='paragraph'> ）要素のセマンティクスは no です！

<！> quot; semantic HTML <！> quot;として記述された<span class='emphasis'> sのフォレストが表示された場合、常に私は気を失います。いいえ、ちがいます！これは*セマンティックHTMLではありません！特に、多くの<address>、<ul>および個人的なお気に入り<=>および<=>が含まれている場合。

誤解しないでください。セマンティックでない<=> sを使用することは、間違っている-セマンティックな<=> sを使用するよりも確かに優れていますが、セマンティックな正しい要素<！> nbsp; <！>＃8211;多くの場合、問題はHTMLが何も提供しないことです。たとえば、スニペットでは<=>要素を使用しますが、仕様、この要素はアドレスをマークアップするためのものではありません ！ページの作者のアドレスをマークアップするためにのみ <！> nbsp; <！>＃8211; IOWそれはまったく役に立たない。

投稿した例には多くのコンテキストが欠落しているため、言うのは難しいですが、実際には表形式または階層形式のデータを表示したいようです。この場合、<=> sまたは<=> s良い選択かもしれません。

あなたの質問とはまったく関係ありません： hCard および XOXO マイクロフォーマット。

まったくありません。テーブルの使用を避けるために、他にも多くの利点があります。

私は、個人的にクリアリングのニーズに応じてclearfixハックを使用しています。 

/* Clearfix */
#content:after,
.box:after {
  content:'.';
  display: block;
  clear: both; 
  visibility: hidden; 
  height: 0;
}
#content,
.box {
  zoom: 1; /* IE */
}

注意：clearfixクラスをすべてに追加するのではなく、セレクターをカンマで区切ります。本当にうまくいきます。唯一の問題は、zoomプロパティがIE固有で検証されないことですが、overflow: autoなどの他のプロパティで発生する可能性があるような副作用はありません。

私はこれをプロのWebサイトで5年間問題なく使用しています。

アンナカタの答えが示すように、これらのクリアリングブロックは必要ありません。しかし、これとは別に、テーブルを避けることの利点の1つは、ページを段階的にレンダリングできることです。テーブルは、すべてのコンテンツを含む entire テーブルが解析された場合にのみレンダリングできます。大きなページがあり、接続が遅い場合は、時間がかかる場合があります。 divはすぐにレンダリングできます。つまり、ユーザーが使用できるものをテーブルよりもはるかに早く表示できる可能性があります。

もちろん、これはちょっとしたボーナスの利点ですが、そうではなく、テーブルを避ける理由（<非表形式のデータの場合）

であってはなりません

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top