div要素をきれいに並べるのは難しい（floatを使って配置）

これのfloat版。

今回も以下の3つを並べてみます。

<div class="div1">div要素1</div>
<div class="div2">div要素2</div>
<div class="div3">div要素3</div>

前回と同じなので省略。そのままでいい。

全部に「float: left;」を設定。

<style>

.div1{
    float: left;
}
.div2{
    float: left;
}
.div3{
    float: left;
}
</style>

div要素1

div要素2

div要素3

これの問題点は、そのままにしておくとその下の要素にも影響すること。
（重なって表示されるとか、その次の要素も回り込んで表示されるとか）

横並びにした次の要素に「clear: left;」を設定すると回避できます。
↑のサンプルの直後には

<div style="clear: left;"></div>

と空divを入れています。

ということで、今回はdiv2とdiv3に「float: left;」を設定。
displayでなんとかする方式と違って、widthをしっかり入れてやらないと崩れます。

<style>
.div1{
    width: 10em;
}
.div2{
    width: 5em;
    float: left;
}
.div3{
    width: 5em;
    float: left;
}
</style>

div要素1

div要素2

div要素3

こちらはdiv2とdiv3を親divでくくり、div1と親divを横並びにします。

<div class="div1">div要素1</div>
<div class="div_parent">
  <div class="div2">div要素2</div>
  <div class="div3">div要素3</div>
</div>

<style>
.div_parent{
    float: left;
}
.div1{
    height: 10em;
    float: left;
}
.div2{
    height: 5em;
}
.div3{
    height: 5em;
}
</style>

↓またズレた…。はてブロのCSSがなんか影響してるっぽい。

div要素1

div要素2

div要素3

アナログCPU：5108843109