与父母的兄弟姐妹相比，为什么孩子块的行为与父母不同？答案

【问题标题】：Why are the child blocks behaving differently to their parents, in relation to their parents' siblings?与父母的兄弟姐妹相比，为什么孩子块的行为与父母不同？
【发布时间】：2017-07-23 10:18:49
【问题描述】：

我有一个这样的 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 和 content block 是兄弟姐妹。联系人、标题和编辑是同级的。

这是我的 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);
}

这是结果：

为什么 content 和 top-content 块的位置和尺寸（以蓝色和黄色显示）不受左右翅膀的影响，但 top-content 块的孩子的位置和尺寸（联系人，标题和编辑）是？

将儿童的显示更改为“阻止”并不能解决此问题。除了 background-color 和 display: inline-block 之外，top-content 块和它的孩子没有区别。

【问题讨论】：

因为它们有不同的类别和不同的样式？
唯一不同的风格是背景颜色...这将如何影响位置？

标签： html css dimensions display

【解决方案1】：

如果孩子是display:inline-block，或者如果孩子是display:block，他们的文本内容将避免浮动，因为他们所在的行框不会与浮动重叠。

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

【讨论】：