flow-root – 1x2x3

CSSについて説明します。

display: flow-rootについて説明します。

display: flow-root

flow-rootは、新しいflow contextをestablishします。

sample

サンプルで確認します。

test_006.css

div.test-006-001
{
    width: 50%;
    height: 99ex;

    background-color: #20FF6088;
}

div.test-006-001 div
{
    width: 50%;
    height: 9ex;

    margin: 0.5rem;

    background-color: #2060FF88;
}

div.test-006-001 p
{
    width: 50%;
    height: 3ex;

    margin: 0.5rem;

    background-color: #10FF40FF;
}

div.test-006-002
{
    display: flow-root;
}

div.test-006-002 div
{
    width: 50%;
    height: 3ex;

    margin: 0.5rem;

    background-color: #CCFF66FF;
}

test_006.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_006.css"/></head>
<body>

<div class="test-006-001">

<div></div>

<div class="test-006-002">
<div></div>
<div></div>
</div>

<div class="test-006-002">
<div></div>
<div></div>
</div>

<div><p></p></div>

</div>

</body>

表示は下記となります。

CSS

div
{
    display: block;
    display: flow-root;
}

div
{
    display: block flow-root;
}

div
{
    display: flow-root;
}

上記はすべて同じ設定となります。

参考

CSS Display Module Level 3

<display-legacy>

参考 & 広告

Kindle版です。

紙の本と、PDF版があります。

Kindle版です。

電子書籍です。