CSSによるレイアウト

by s_hiroshi

HTML

<h2>float指定なし</h2>

<p>
  ブロック要素は包含要素の幅いっぱいに広がり、上から配置される。
</p>

<div class="wrapper">
  <div class="first-col1">
    あああああああああ
  </div>
  <div class="second-col1">
    いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  </div>
</div>

<h2>float指定あり</h2>

<p>
  floatを指定した要素は、文字通り浮動ボックスになる。後続する要素は浮動ボックに対して回り込むように配置される。
</p>

<p>CSS2.1からwidthを指定しないときは内容を計算して設定される。</p>

<div class="wrapper clearfix">
  <div class="first-col2">
    あああああああああ
  </div>
  <div>
    いいいいいいいいい
  </div>
</div>

<div class="wrapper clearfix">
  <div class="first-col2">
    あああああああああ
  </div>
  <div>
    いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  </div>
</div>

<div class="wrapper clearfix">
  <div class="first-col2">
    <img src="https://i0.wp.com/www.findxfine.com/wordpress/wordpress/wp-content/uploads/2020/05/fff.png" alt="">
  </div>
  <div>
    いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
    いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  </div>
</div>

<h2>float指定あり2</h2>


<p>
両方にfloat:left/rightをした例（以前はレイアウトなどで使われた）。
どちらも浮動ボックスのために、合計が包含ボックスの幅を超える場合は一方が下に配置される。</p>
<div class="wrapper clearfix">
  <div class="first-col2">
    あああああああああ
  </div>
  <div class="second-col2">
    いいいいいいいいい
  </div>
</div>

<div class="wrapper clearfix">
  <div class="first-col2">
    あああああああああ
  </div>
  <div class="second-col2">
    いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  </div>
</div>

<p>
  ※ floatプロパティにleft, rightを指定した場合は、基本はwidthプロパティを指定することが推奨されているが、今回は理解を深めるために指定していしていない

CSS

* {
  box-sizing: border-box;
}

.wrapper {
  width: 400px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  background: #eee;
}

.first-col1 {
  padding: 10px;
  background: blue;
}

.second-col1 {
  padding: 10px;
  background: green;
}

.first-col2 {
  float: left;
  padding: 10px;
  background: blue;
}

.second-col2 {
  float: right;
  padding: 10px;
  background: green;
}

.clearfix::after {
   content: "";
   display: block;
   clear: both;
}