为什么 child 块与它们的 parents 块在 parents 的兄弟姐妹中表现不同？

Question

我有这样的 HTML 结构：

    0.body
       ->>1.background
          ->>2.leftwing
          ->>2.rightwing
          ->>2.content block
             ->>3.top-content block
                ->>4.contacts block
            ->>4.title block
                ->>4.edited block

leftwing、rightwing 和内容块是兄弟。 contacts, title 和 edited 是兄弟姐妹。

这是我的 HTML:

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="bckdrp all">
        <div class="lftfd  all">
        </div>
        <div class="rtfd  all">
        </div>
        <div class="bigbox all">
            <div class="topbox all">
                <div class="lftcnt inlblk all">
                    contact
                </div>
                <div class="midcnt inlblk all">
                    title
                </div>
                <div class="rtcnt inlblk all">
                    edited
                </div>
            </div>
            <div class="topnav all">
                <div class="toppnt all">
                    up
                </div>
            </div>
            <div class="midbox all">
                <div class="lftspc inlblk all">
                </div>
                <div class="midspc inlblk all">
                    <div class="super all">
                        LONG
                        <!--ENLONGATED-->
                    </div>
                </div>
                <div class="rtspc inlblk all">
                    <div class="navpad all">
                        <!--1--><div class="navcir all">1</div>
                        <!--2--><div class="navcir all">2</div>
                        <!--3--><div class="navcir all">3</div>
                        <!--4--><div class="navcir all">4</div>
                        <!--5--><div class="navcir all">5</div>
                        <!--6--><div class="navcir all">6</div>
                    </div>
                </div>
            </div>
            <div class="botnav all">
                <div class="botpnt all">
                    down
                </div>
            </div>
            <div class="botbox all">
                <div class="foot all">
                    <div class="acc all">
                        login
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

这是我的 CSS:

.bckdrp
{
    background: url("img/bckdrp.jpg") center center no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

.lftfd
{
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.0));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.0));
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.0));
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.0));
    float: left;
    height: 100%;
    width: 30%;
}

.rtfd
{
    background: linear-gradient(to right, rgba(0, 0, 0, 0.0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0.0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
    float: right;
    height: 100%;
    width: 30%;
}




.inlblk
{
    display: inline-block;
}


.bigbox
{
    background-color: blue;
}

.topbox
{
    background-color: yellow;
}

.all
{
    border: 1px solid rgba(255, 0, 0, 0.5);
}

这是结果：

为什么内容和top-content块（蓝色和黄色显示）的位置和尺寸不受左右翼的影响，但children的位置和尺寸top-content 块（联系人、标题和已编辑）是？

将 children 的显示更改为 "block" 并不能解决这个问题。除了 background-colour 和显示：inline-block top-content 块和 children.

块之间没有区别

Answer 1

无论是 children，如果它们是 display:inline-block，或者如果 children 是 display:block，它们的文本内容都会避免浮动，因为行框他们所在的位置不会与花车重叠。

虽然蓝色和黄色框是块框，即它们不在行框内。块框，除非它们建立块格式上下文，否则不会注意到浮动的存在，因此会完全延伸到整个页面。

为什么 child 块与它们的 parents 块在 parents 的兄弟姐妹中表现不同？

Why are the child blocks behaving differently to their parents, in relation to their parents' siblings?

html

css

dimensions

display