MENU
  1. ホーム
  2. CSS
  3. float

float

CSS
2023.12.29

floatプロパティは、ブロック要素を左または右に回り込むために使用されるプロパティになります。
※要素を宙に浮かせて他の要素を下に回り込ませる

floatの説明図
floatプロパティ
記法

.クラス名　{
　float : 回り込み位置;
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>floatプロパティ</title>
  </head>

  <body>
    <p>回り込みなし</p>
    <div>
      <div class="square apple-green"></div>
      <div class="square turquoiseーblue"></div>
      <div class="square yamabuki"></div>
    </div>
    <hr />
    <p>左寄せ(全て)</p>
    <div>
      <div class="clearfix">
        <div class="square apple-green float-left"></div>
        <div class="square turquoiseーblue float-left"></div>
        <div class="square yamabuki float-left"></div>
      </div>
    </div>
    <hr />
    <p>左寄せ(2つ)</p>
    <div>
      <div class="clearfix">
        <div class="square apple-green float-left"></div>
        <div class="square turquoiseーblue float-left"></div>
      </div>
      <div class="square yamabuki"></div>
    </div>
    <hr />
    <p>右寄せ(全て)</p>
    <div>
      <div class="clearfix">
        <div class="square apple-green float-right"></div>
        <div class="square turquoiseーblue float-right"></div>
        <div class="square yamabuki float-right"></div>
      </div>
    </div>
  </body>
</html>
.element {
  height: 100%;
  background-color: grey;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.square {
  height: 50px;
  width: 50px;
}
.apple-green {
  background-color: #bfdd9e;
}
.turquoiseーblue {
  background-color: #56c1db;
}
.yamabuki {
  background-color: #f4af2b;
}
出力結果

回り込みなし

左寄せ(全て)

左寄せ(2つ)

右寄せ(全て)

CSS