「CSS入門」floatで浮動要素の位置を設定する方法

2014年9月13日2020年10月19日

構文
1.キーワード値
float: none;
float: left;
float: right;
float: inline-start;
float: inline-end;
2.グローバル値
float: inherit;
float: initial;
float: unset;

htmlコード

<section>
  <div class="left">A001　AAAAAAAAA</div>
  <div class="left">B002 BBBBBBBB</div>
  <div class="right">C003 CCCCCC</div>
  <p>Test123456.</p>
</section>

CSSコード

section {
  border: 2px solid red;
}
div {
  margin: 8px;
}
.left {
  background: green;
}
.right {
  background: yellow;
}