html - float 后清除会在两个 div 之间创建一个空隙

Question

我的 html 有以下部分

<div class="header">            
    <div class="header-bar">
        <div class="pull-left">
            <div class="title">Ci models database</div>
        </div>
    </div>              
    <div class="clear-both"></div>
    <ol class=breadcrumb>
        <li class="active"><a href="#">All models</a></li>
    </ol>
</div>

css(面包屑和事件类是 Bootstrap )

.header-bar {
    border: None;
    background-color: #66CCFF;
    min-height:30px;
}

.title {
    padding: 5px 5px 10px 5px;
    color: white;
    font-size: large;
}
.clear-both{
    clear:both; 
}

但是在 header-bar 和 breadcrumb html 之间添加了一个空格(see bootply)。我怎样才能删除这个空白，因为在 div 之间找不到填充和边距。

Answer 1

问题是内部.title div的计算高度大于容器.header-bar的计算高度。 height、min-height、border、padding 等属性可以直接影响高度，而 display、box-sizing 和 position 等属性都可以间接影响高度。

结果是内部 .title div 将流中的下一个 div 下推 10px。

CSS 没有规则说一个 div 必须包含它的 child 的高度并阻止它们影响其他 div，even when height is directly defined .我们需要准确地告诉它在渲染时应该如何表现。

有几种方法可以解决这个问题:

1. http://www.bootply.com/Qa1ME2M2uk - 在父级上使用 overflow: hidden;。 Overflow is a css property它用于控制当子元素大于其父元素时发生的情况。值得注意的是，根据其他属性，溢出不一定会以破坏布局的方式呈现自身。

2. http://www.bootply.com/ssq3EAzeyk - 设置明确的高度以严格控制元素的尺寸。这可能是标题栏的最佳选择。

3. http://www.bootply.com/yeodYRLLJk - 为 parent 设置更大的最小高度，肯定会包含 child 。如果您的填充用于对齐目的，这将很有用 - 在示例中设置 min-height: 40px; 就是这样做的。

4. http://www.bootply.com/GznfJxUWUF - 删除使元素计算得更高的填充(如另一个答案中所述)。