CSS floatを指定して要素を回り込むサンプル

2022年12月30日

環境
Windows 10 Home 64bit
Google Chrome　107.0.5304.122（Official Build）（64 ビット）
構文
float:left/ float:right
floatは、指定した対象を左または右に寄せて、後続を反対側に回り込ませます。float は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  .main {
    float: left;
    height: 70px;
    width: 100px;
    border: 1px solid #000;
    background-color: skyblue;
    text-align: center;
  }
</style>
</head>
<body>
<div class="main">toto</div>
<h1>6666</h1>
<p>tokyo</p>

</body>
</html>

実行結果
要素「main」のボックスが左に配置されます。
後続の文字「6666」と「tokyo」が右に回り込みます。

CSS

Posted by arkgame

関連記事: