CSS Float および関連するレイアウトモード-CSSチュートリアル-php.cn

CSS Float および関連するレイアウトモード

高洛峰

リリース： 2016-11-01 15:40:27

オリジナル

2022 人が閲覧しました

浮動小数点値

CSS Float および関連するレイアウトモード

栗を見てください

赤いワイヤーフレームは親要素を表します

CSS Float および関連するレイアウトモード

実際には、完全に邪魔にならないわけではなく、ブロックされます。親要素の境界によって。

float 要素は同じドキュメントフロー内にあります

例を見てください:

赤い線のボックスは親要素を表します

CSS Float および関連するレイアウトモード

3 つの子要素が「左にフロート」した後、親要素はコンテンツがないため、親要素は High になりません。

float 要素はドキュメントフローから半分離されています

要素の場合、コンテンツの場合はドキュメントフローから分離され、ドキュメントフロー内にあります。要素は重複しますが、コンテンツは重複しません。

CSS Float および関連するレイアウトモード

例をあげてください:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>float元素半脱离文档流</title>
    <style type="text/css">
    body{
        width: 300px;padding: 5px;line-height: 1.6;
        border: 1px dashed blue;
    }
    .sample{
        height: 100px;margin-right: 5px;
        padding: 0 5px; line-height: 100px;background-color: pink;
    }
    .sb{
        outline: 1px dashed  red;

    }
    .sample{
        float: left;
    }
    </style>
</head>
<body>
<div class="sample">float : left </div>
<div class="sb">
A float is a box that is shifted to the left or right on the current line .
the most interesting characteristic of a float (o "floated" o "floating" box)
is that content may flow along its side (or be prohibited from doing so by the &#39;clear&#39;
property).
</div>
</body>
</html>

ログイン後にコピー

CSS Float および関連するレイアウトモード

別の例をあげてください:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>float abscure</title>
    <style type="text/css">
    body{
        width: 400px;line-height: 1.6;
    }
    .sample{
        width: 100px;line-height: 100px;
        margin: 3px;text-align: center;
        background-color: pink;
    }
    .sb{
        margin: 10px auto; padding: 5px; border: 1px dashed #0f00fa;
    }
    .sample{
        float: left;
    }
    

    </style>
</head>
<body>
    <div class="sb">
            <div class="sample">float: left;</div>
        第十二届ChinaJoy 动漫游戏展7月31号在上海新国际博览中心开幕，导出是站台表演的帅哥美女。
    </div>
    

    <div class="sb">
        有些游戏商为了吸引人气，还请来了著名的演员、模特前来助阵。以下是一批漂亮的Show Girl现场照片。
    </div>
</body>
</html>

ログイン後にコピー

CSS Float および関連するレイアウトモード

通常、この結果は望ましくありませんが、ピンクの div は最初のテキストブロックで囲まれているだけです。 clear 属性を使用する必要があります

clear

clear を理解するには、まず div がページ内の排他的な行を占め、上から下に配置されることを知る必要があります。は伝説の流れです

CSS Float および関連するレイアウトモード

① 後続の要素に適用して、後続の要素へのフローティングの影響をクリアします。

②ブロックレベルの要素に適用する

使用法:

空白の要素を追加します (あまり使用されません)

clearfix、これは一般的な解決策です。実際、使用できないドットはフロートをクリアするために使用されます。

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>float abscure</title>
    <style type="text/css">
    body{
        width: 400px;line-height: 1.6;
    }
    .sample{
        width: 100px;line-height: 100px;
        margin: 3px;text-align: center;
        background-color: pink;
    }
    .sb{
        margin: 10px auto; padding: 5px; border: 1px dashed #0f00fa;
    }
    .sample{
        float: left;
    }

    .clearfix:after{
        content: &#39;.&#39;;     /* 在clearfix后面加入一个 . */
        display: block; /* 设置 . 块级元素 */
        clear: both;  /* 清除浮动效果 */

        /*隐藏那个 .  */
        height: 0;       
        overflow: hidden;
        visibility: hidden;

    }

/*    .clearfix{
    zoom: 1; 由于在IE 低版本中，不支持after属性，所以需要增加zoom属性 
    } */

    </style>
</head>
<body>
    <div class="sb clearfix">
            <div class="sample">float: left;</div>
        第十二届ChinaJoy 动漫游戏展7月31号在上海新国际博览中心开幕，导出是站台表演的帅哥美女。
    </div>
    

    <div class="sb">
        有些游戏商为了吸引人气，还请来了著名的演员、模特前来助阵。以下是一批漂亮的Show Girl现场照片。
    </div>
</body>
</html>

ログイン後にコピー

CSS Float および関連するレイアウトモード

CSS Float および関連するレイアウト モード

CSS Float および関連するレイアウトモード