「CSS」浮動要素floatプロパティのサンプル

2021年10月19日

構文
float は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、
テキストやインライン要素がその周りを回りこめるように定義します。
float: left;要素は、必ずその包含ブロックの左側に浮動します。
float: right;要素は、必ずその包含ブロックの右側に浮動します。

使用例

<style>
  .cft {
  /*要素は、必ずその包含ブロックの左側に浮動*/
    float: left;
    height: 100px;width: 150px;
    border: 1px solid #000;
    background-color: skyblue;
    text-align: center;
  }
</style>
<div class="cft">floatプロパティ</div>
<p>項目1</p>
<p>項目2</p>
<p>項目3</p>