Question

我在建筑的网站上得到了这种分层的风格。

以前是这样的：

<body>
    <div id="mainContainer" style="width:70%" class="Center Pane0 PaneWrapper">
        <div class="Pane1">
            blah blah
        </div>

        <div class="Pane1">
            blah blah
        </div>
    </div>
</body>

并且一切顺利，mainContainer将其高度扩展到内部内容所需的最小量。然后，我决定添加一个这样的侧边栏：

<body>
    <div id="mainContainer" style="width:70%" class="Center Pane0 PaneWrapper">
        <div style="width:80%;float:left">
            <div class="Pane1">
                blah blah
            </div>

            <div class="Pane1">
                blah blah
            </div>
        </div>

        <div style="width:19%;float:left">
            <div class="Pane1">
                imaginary sidepanel
            </div>
        </div>
    </div>
</body>

突然，mainContainer高度似乎为0（它的唯一高度来自影响它的边距/填充值）。这是常规行为吗？不知怎的，我记得不一样了。

.Pane0和.Pane1只是视觉样式而且不会以任何方式影响定位.PaneWrapper目前只添加填充：10px和.Center确实为margin-left：auto; margin-right：auto

这是怎么回事？

Answer 1

你只需要清除浮子。一个很好的方法是使用
overflow:auto;

的#mainContainer

或申请此课程：

.clearfix:before,
.clearfix:after{
  content:' ';
  display:table;
}
.clearfix:after{
  clear:both;
}

Demo using clearfix
Demo using overflow

http://nicolasgallagher.com/micro-clearfix-hack/

Answer 2

如果您将div元素的样式从float:left更改为display:inline-block;，则会阻止父元素折叠。

<body>
  <div id="mainContainer" style="width:70%" class="Center Pane0 PaneWrapper">
    <div style="width:80%; display:inline-block;">
        <div class="Pane1">
            blah blah
        </div>

        <div class="Pane1">
            blah blah
        </div>
    </div>

    <div style="width:19%; display:inline-block;">
        <div class="Pane1">
            imaginary sidepanel
        </div>
    </div>
</div>

Demo

Div不应该伸展

2 个答案: