BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】CSSのfloatとunfloatについて

2022-01-21 21:35:53

フロートの定義

要素を通常のドキュメントの流れから外し、親要素の左端または右端、あるいは float が設定されている他の要素の端に近づけることができます。

フロートで解決する問題点

1. 画像を囲むテキストの問題を解決する
2. スペーシングの問題を解決する
3. 左側、右側へのレイアウトが可能

画像の左側にテキストをレイアウト

フロートを使用しない場合

フロートを使用する場合。

使用する属性

採用された属性：float、属性値：right/left

フロートの高さ崩壊問題と解決策 高さ崩壊問題

親要素で設定された高さと子要素で設定された高さが異なる場合、高さ方向の崩れが発生し、挿入時に正しい位置にテキストが挿入できない場合がある
高さ方向の崩れにより、このブロックの下にタイトルが表示されない。

解答後。

解決方法

floatをクリアする擬似要素。
親要素の後に擬似要素を設定し、float をクリアする。
1. 親タグに応じた表示を設定する
2. 次に、clear:both を設定します。
コード 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .parent{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            display: block;
            background: lightgray;
        }
        .parent:after{
            content: "";
            display: block;
            clear: both;
        }
        .child{
            display: inline-block;
            width: 200px;
            height: 200px;
            background: lightblue;
            float: left;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<h1>This is a title</h1>
<div></div>
</body>
</html>

今回の記事は、CSSの浮遊・非浮遊効果についてです。CSSのフローティングとアンフローティングについては、スクリプトハウスの過去記事を検索していただくか、引き続き以下の関連記事を閲覧していただければと思いますので、今後ともスクリプトハウスをより一層応援していただければと思います

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します