CSS を使用してフローティングの Clearfix と Clear をクリアする方法についての簡単な説明-CSSチュートリアル-php.cn

CSS を使用してフローティングの Clearfix と Clear をクリアする方法についての簡単な説明

高洛峰

リリース： 2017-03-17 16:33:51

オリジナル

1996 人が閲覧しました

以下のエディターでは、CSS クリアフロート (clearfix および clear) の使用について簡単に説明します。編集者はこれがとても良いと思ったので、参考として共有します。エディターと一緒に見に来てください

この記事では、cssを理解し始めたばかりの子供向けに、htmlでのclearfixとclearの使い方を主に説明します。ここではclearfixとclearのスタイルについては書きません。

これら 2 つのクラスの使用法について説明しましょう。まず、例を見てみましょう:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>如何在html中使用clearfix和clear</title>
    <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
    <style type="text/css">
    .fl{float:left;}   
    .demo{background:#ccc;}   
    .item1{background:#f90;height:100px;width:100px;}   
    .item2{background:#fc0;height:200px;width:100px;}   
    </style>
</head>
<body>
    <p class="demo">
        <p class="fl item1"></p>
        <p class="fl item2"></p>
    </p>
</body>
</html>

ログイン後にコピー

float を使用すると、多くの未知の問題が発生することは誰もが知っています。上記の例を通じて、class="demo の高さを見つけることができます。 " 内部の p によって引き伸ばされません。これは、内部の p が浮いて文書から離れるためです。デモ自体には高さがないため、灰色の背景は見えません。もちろん、デモに高さを与えるだけですが、これはこの記事の目的から逸脱します (外側の p の高さを内部のコンテンツによって決定したい場合があります)。

フローティングによって引き起こされる問題なので、フローティングをクリアするだけです。専門家は、overflow:hidden など、フローティングをクリアするための多くの方法を持っていると思います。以下にclearfixとclearを使ってfloatをクリアする方法を紹介します。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>如何在html中使用clearfix和clear</title>
    <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
    <style type="text/css">
    .fl{float:left;}   
    .demo{background:#ccc;}   
    .item1{background:#f90;height:100px;width:100px;}   
    .item2{background:#fc0;height:200px;width:100px;}   
    </style>
</head>
<body>
    <h2>用 clear 清除浮动</h2>
    <p class="demo">
        <p class="fl item1"></p>
        <p class="fl item2"></p>
        <p class="clear"></p>
    </p>
    <h2>用 clearfix 清除浮动</h2>
    <p class="clearfix demo">
        <p class="fl item1"></p>
        <p class="fl item2"></p>
    </p>
</body>
</html>

ログイン後にコピー

clearfixは主にフローティングレイヤーの親レイヤーで使用され、clearは主にフローティングレイヤーとフローティングレイヤーの間で使用され、フローティングレイヤーと同じレベルにあることがわかりました。親レイヤーの高さを拡張したい場合は、クリアを最後に入れるだけです。

これら 2 つの方法のどちらが優れているかを言うのは難しいですが、特定のニーズを詳細に処理する必要があるとしか言えません。

フローティングをクリアするclearfixの徹底分析

cssのclearfixの使い方徹底理解

CSSのclearfixクリアフローティングメソッドについて

最も包括的なcssのclearfixクリアフローティングメソッド

以上がCSS を使用してフローティングの Clearfix と Clear をクリアする方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。