3

divclear:leftを書くとfloat解除されるのに、
spanだとされないのはなぜですか?

[html]

<img src="images/001.png" alt="">

    <!-- <div id="study_001"> -->
    <span id="study_001">
    <span id="margin">margin</span><span id="border">border</span><span id="padding">padding</span>
    </span>
    <!-- </div>だとfloat解除される! -->

[css]

img {
  width: 500px;
  margin: 20px;
  float: left;
}

#study_001{
  clear: left;
}

#margin{
  padding: 10px 50px;
  margin: 10px 0px 10px 20px;
  background: #f98;
}

#border{
  border-left: 3px #fff solid;
  padding: 10px 0px 10px 2px;
  margin: 0;
}

#padding{
  background: #498;
  padding: 10px 50px;
}

spanの場合(解除されない)
spanの場合

divの場合(解除される)
divの場合

1 件の回答 1

4

直接的にはclearプロパティ

Applies to: block-level elements

とブロック要素にしか適用されないからです。

論理的にもブロック要素の開始位置を下にずらす機能です。

画像の説明をここに入力画像の説明をここに入力

ここでもしブロック要素の中間部分のインライン要素に対してclearを指定したとして、どのようなレイアウトを期待されますか? …と考えると<span>要素でclearが機能しないのは適切かと。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。