無理しないでゆっくり休んでね!

CSS Float

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

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

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

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を適切にクリアできます。

左に寄せられた要素
右に寄せられた要素
回り込むコンテンツ

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

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

.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;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>
  <div class="container clearfix">
    <div class="float-left">左に寄せられた要素</div>
    <div class="float-right">右に寄せられた要素</div>
  </div>
  <div class="content">回り込むコンテンツ</div>
</body>
</html>

この例では、clearfixクラスがコンテナ要素に適用されており、子要素のfloatが適切にクリアされています。これにより、親要素が子要素の高さに合わせて自動的に調整され、content要素が適切に表示されます。

コメント

タイトルとURLをコピーしました