CSSフローティングとフローティング解除について

フロートの定義

要素を通常のドキュメントフローから外し、要素を左または右に近づけます。親要素の端、またはフロートに設定された他の要素の端

浮上した問題解決

1. 画像の周囲にテキストが入る問題を解決する
2. 間隔の問題を解決する
3. 左または右にレイアウトできます

テキストを画像の左側に配置する

floatを使用しない場合:

ここに画像の説明を挿入

float を使用する場合:

ここに画像の説明を挿入

使用された属性

使用される属性: float、属性値: right/left

浮上高の崩壊問題と解決策浮上高の崩壊問題

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

ここに画像の説明を挿入

解決後:

ここに画像の説明を挿入

回避策

疑似要素クリアフロート:
フロートをクリアするには、親要素の後に疑似要素を設定します。
1.親タグに合わせて表示を設定する
2. もう一度clear:bothを設定する
コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル タイプ="text/css">
        。親{
            幅: 400ピクセル;
            高さ: 400px;
            マージン: 0 自動;
            表示: ブロック;
            背景: ライトグレー;
        }
        .parent:after{
            コンテンツ： "";
            表示: ブロック;
            クリア: 両方;
        }
        。子供{
            表示: インラインブロック;
            幅: 200ピクセル;
            高さ: 200px;
            背景: 水色;
            フロート: 左;
        }
    </スタイル>
</head>
<本文>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<h1>これは見出しです</h1>
<div></div>
</本文>
</html>

CSS フローティングとフローティングキャンセル効果に関するこの記事はこれで終わりです。CSS フローティングとフローティングキャンセル効果に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTMLからPDFへのスクリーンショット保存機能の実装

>>: html+vue+element-ui のスムーズさを 1 分で体験