No.1ベストアンサー
- 回答日時:
floatを解除するためのclearだと思います。
そもそも、「divタグに<class="cl">を入れる」というのは、明らかに変です。
floatは、テキスト中にある画像の周囲に本文記事を回りこませるためのプロパティであることはご存知だと思います。
[基本的な使い方]
<div class="section">
<h2>見出し</h2>
<div class="figure"><!-- figure:(英)挿絵 -->
<p><img></p>
<p>画像の説明</p>
</div>
<p>本文記事</p>
<p>本文記事</p>
</div>
<div class="section">
<h2>見出し</h2>
<p>本文記事</p>
・・・・
と言う構造の文章があるとき、挿絵のブロックを右側にfloatさせたいときは、
div.figure{width:240px;float:right;margin:0.5em 1em;font-size:0.8em;}
div.section{clear:right;}
と言う風に使います。
(HTML/CSSについて)
HTMLは文書構造をマークアップするものです。用意されている要素(タグで示される)で足りないとき、idやclass名をつけて文書構造を示します。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
この部分がわかりにくかったので、HTML5では『文書をよりよく構造化するために、・・・要素が新しく追加されました。 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』
すなわち、sectionやfigure,footer,header,navなどです。
もちろん、ここでclass名は必要すらなくて
<h2>見出し</h2>
<div class="figure"><!-- figure:(英)挿絵 -->
<p><img></p>
<p>画像の説明</p>
</div>
<p>本文記事</p>
<p>本文記事</p>
<h2>見出し</h2>
<p>本文記事</p>
・・・・
で、
div.figure{float:right;*****}
h2{clear:right;}
でも十分です。
「divタグに<class="cl">を入れると(margin: 0 auto;)が効かなくなります。」
divであろうとなかろうと、divに指定してあるmarginは生きているはずです。floatする要素についてもmarginは有効です。ただし、floatする要素は、本文とは切り離されまか。
【引用】____________ここから
浮動体は通常フローに属していないので、その前後に生成される位置指定されていないブロックボックスは、浮動体が存在しないかのように流し込まれる。
・・・【中略】・・・
浮動ボックスのマージンが、隣接するボックスのマージンと相殺し合うことは決してない。 したがって前の例において、P要素のボックスと、IMG要素の浮動ボックスの間でマージンが相殺されることはない。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より
もし、段組にfloatを使われているのでしたら、それは本来の段組ではありません。
→Webデザインにおける段組 ( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84# … )
→CSSについて教えてください - ホームページ作成ソフト - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7539718.html )
本来の、absoluteを使って段組をすると問題は解決すると思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- JavaScript htmlとcssに関する質問です 3 2022/12/06 05:36
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
一括で全体を右にずらす
-
divとpの使いわけ
-
1時間30分を簡単に表したいで...
-
divを追加すると下に隠れてしまう
-
複数のボタンを等間隔に、かつ...
-
スペースを使わず文字位置を揃...
-
インラインフレームのページ内...
-
ブラウザの表示幅で100%指定が...
-
iframeを使わずに上下50%ずつに...
-
body>div{}の意味を知りたい
-
html の divとtable の役割
-
hタグの右横に画像を表示
-
divタグの名前の付け方
-
reuterのScraypingで不思議な現...
-
<DIV> と </DIV> の間が空です。
-
HTMLのJIS規格について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
min-heightとheightの違いについて
-
HTML5 iframe の代わり
-
divの中に外部のHTMLを埋め込む
-
3カラムレイアウトで「常に残り...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
-
reuterのScraypingで不思議な現...
-
htmlの見出しタグ(<h1>)の次...
-
1サイト内にHTML5とXHTMLが混在...
-
inline-blockをネストすると表...
-
html5でheaderの中にnav
-
<!-- #BeginLibraryItemとは
おすすめ情報