CSS Float

CSSのfloatプロパティは、要素を文書の左側または右側に寄せるために使用されます。これにより、他の要素がその周囲を回り込むレイアウトが実現されます。

floatプロパティは主に以下の3つの値を持ちます。

プロパティ値	説明
none（デフォルト）	要素は通常の文書フローに従います。
left	要素が左側に寄せられ、周囲の要素が右側から回り込みます。
right	要素が右側に寄せられ、周囲の要素が左側から回り込みます。

floatプロパティについて
clearfixについて

floatプロパティについて

左に寄せられた要素

右に寄せられた要素

回り込むコンテンツ

コードは以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.container {
  width: 100%;
  overflow: auto;
}

.float-left {
  float: left;
  width: 50%;
  height: 100px;
  background-color: lightblue;
  text-align: center;
}

.float-right {
  float: right;
  width: 50%;
  height: 100px;
  background-color: lightgreen;
  text-align: center;
}

.content {
  height: 200px;
  background-color: lightyellow;
  text-align: center;
  padding-top: 50px;
}
</style>
</head>
<body>
  <div class="container">
    <div class="float-left">左に寄せられた要素</div>
    <div class="float-right">右に寄せられた要素</div>
    <div class="content">回り込むコンテンツ</div>
  </div>
</body>
</html>

この例では、float-leftクラスが適用された要素が左側に寄せられ、float-rightクラスが適用された要素が右側に寄せられています。

contentクラスが適用された要素は、左右に寄せられた要素の周囲を回り込む形で表示されます。

また、コンテナ要素にはoverflowプロパティがautoに設定されており、floatを使用した要素が親要素からはみ出さないようになっています。

clearfixについて

floatを使用すると、要素が親要素からはみ出すことがあります。

これを解決するために、clearfixというテクニックが使われています。

clearfixは、親要素に適用されることで、子要素のfloatを適切にクリアし、親要素が子要素の高さに合わせて自動的に調整されるようになります。

clearfixを適用する方法はいくつかありますが、以下に一般的な方法を示します。

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

これをHTMLファイルに追加して、clearfixクラスを親要素に適用することで、子要素のfloatを適切にクリアできます。