33798


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

**[html]**

[code]

    <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解除される！ -->
    
[/code]

**[css]**

[code]

    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;
    }
    
[/code]

spanの場合（解除されない）  
[![spanの場合](https://i.stack.imgur.com/aEEk2.png)](https://i.stack.imgur.com/aEEk2.png)

divの場合（解除される）  
[![divの場合](https://i.stack.imgur.com/DKedA.png)](https://i.stack.imgur.com/DKedA.png)


CC BY-SA 3.0
2017-04-05T15:52:23.547
33796
2017-04-05T23:13:42.350
2017-04-05T17:35:25.077
12297
12297
question
css html5
divだとfloat解除されるのに、spanだとされないのはなぜですか？


直接的には[`clear`プロパティ](https://www.w3.org/TR/CSS2/visuren.html#propdef-clear)は

> _Applies to:_ block-level elements

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

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

[![画像の説明をここに入力](https://i.stack.imgur.com/ckJoR.png)](https://i.stack.imgur.com/ckJoR.png)
→
[![画像の説明をここに入力](https://i.stack.imgur.com/hot2m.png)](https://i.stack.imgur.com/hot2m.png)

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


CC BY-SA 3.0
2017-04-05T23:13:42.350
33798
2017-04-05T23:13:42.350
4236
33796
answer