質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

解決済

1回答

1095閲覧

html5 css3 clearがなぜ必要なのか

goliragolira

総合スコア26

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

0グッド

3クリップ

投稿2018/03/23 11:04

こんにちは、goliraです。
最近、html,cssを勉強しているのですが、その中でコードの意味がわからない部分がありました。
具体的には、下記コードでclearが何故必要なのかが分かりません。
どなたか分かる方、ご教授よろしくお願いします。

#news dl { overflow: hidden; }
#news dt {
__width: 8em;
__float: left;
__margin-bottom: 10px;
__clear: both;
}
#news dd {
__margin-left: 8em;
__margin-bottom: 10px;
}

※__はスペース2つと考えてください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kszk311

2018/03/23 13:15

その辺りのHTML、良ければURLなど共有出来る範囲で記載していただけますか。
defghi1977

2018/03/23 18:18

clearの意味を調べて, clearの有無でレイアウトがどう変わるかを確認したら如何でしょう
kei344

2018/03/24 02:31

質問文のコードは(インデントも崩れないので)コードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
goliragolira

2018/03/24 05:31

kszk311さん、解決してしました。ありがとうございます
goliragolira

2018/03/24 05:32

defghi1977さん、調べてみて解決しました。ありがとうございます。
goliragolira

2018/03/24 05:33

kei344さん、以後気を付けたいと思います。ありがとうございます。
guest

回答1

0

ベストアンサー

divやdt等の要素にfloatを使用する場合、「floatの解除clear」が必要になります。どこに解除の設定をするかはレイアウト等により変わります。

「defghi1977」さんの説明のとおり「CSS float」や「CSS float 解除」等で検索すると説明サイトがたくさんありますので、理解しやすいサイトを検索してみてください。

参考先:
CSS floatを初心者向けに図で解説 抑えるべき注意点とは?
clear …… 回り込みを解除する

投稿2018/03/24 01:19

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

goliragolira

2018/03/24 05:35

回答、ありがとうございます。 参考先のサイトがとても分かり易かったので、ベストアンサーとさせて頂きました。理解できました。今後も機会があれば、よろしくお願いします。
yoshinavi

2018/03/24 06:03

解決されて何よりです。 (^^)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問