为什么float和div之间有差距？答案

【问题标题】：Why is there a gap between float and div?为什么float和div之间有差距？
【发布时间】：2014-08-21 21:37:34
【问题描述】：

谁能解释为什么在这个jsfiddle 中顶部导航元素和位于其下方的内容 div 之间存在小间隙？

当我浮动导航列表项时，这会在顶部导航元素和位于其下方的主要内容元素之间产生一个小间隙。如果我使导航项内联块，差距就消失了。我真的不希望这种行为，因为浮动项目应该从页面流中删除，因此无法下推内容 div。我查看了 Chrome 开发工具中的页面，并没有看到任何可以解释这一差距的内容。

谢谢。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Header Gap Problem</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../reset.css" />
    <link rel="stylesheet" href="base.css" />
</head>
<body>
<div class="wrapper">
    <nav class="nav" role="navigation">
        <li class="nav-item">Members</li>
        <li class="nav-item">Events</li>
    </nav>
    <div class="content-main">
        Main content
    </div>
</div>
</body>
</html>

CSS

body {
    -mox-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper {
    margin: 0 auto;
}

.nav {
    position: relative;
    display: inline-block;
    width: 100%;
    background: #34495e;
}

.nav-item {
    float: left;
    /*
    display: inline-block;
    */
    padding: 1em;
    color: #fff;
    text-decoration: none;
}

.content-main {
    padding: 1em;
    background: #cf6;
}

【问题讨论】：

How to remove the space between inline-block elements?的可能重复
有点和有点不是。我之所以这么说是因为我只有一个 inline-block 元素，即 nav 元素。我不是要删除两个内联块元素之间的空间。我已经实现了解决方案（删除元素之间的空格），如代码中其他地方的链接中所述，它确实有效。

标签： html css css-float

【解决方案1】：

Inline-block 实际上添加了一个空格字符。您可以通过几种方式减轻这种影响；我经常将 inline-block 元素的包含元素设置为 font-size:0。

.wrapper {
    margin: 0 auto;
    font-size:0;
}

http://jsfiddle.net/taruckus/4doogedh/14/

更多信息和内联块技术： http://css-tricks.com/fighting-the-space-between-inline-block-elements/

【讨论】：

此解决方案有效，但我并不喜欢它，因为它似乎要求您在每个包含文本的元素中设置字体大小。使用像这样的简单示例很容易做到这一点，但对于现实页面来说却很痛苦。
您可以在包装器之后添加所有子选择器并将其设置为“初始”之类的通用内容，例如jsfiddle.net/4doogedh/16

【解决方案2】：

这将是一个更好的选择：

.nav {
position: relative;
display: block;
width: 100%;
background: #34495E;
overflow: hidden;
}

完全响应等等。

【讨论】：

谢谢拉尔夫。这确实有效，尽管我不太明白为什么。我有点理解“溢出：隐藏”的作用，在这种情况下，我相信它正在创建一个块上下文，导致主要内容出现在下一行。我认为“显示：块”会做同样的事情，但它会将主要内容向右推，而不是向下推。今天早些时候我发现你也可以做“display: table-row”来达到同样的效果。
overflow: hidden 的原因是强制容器包裹浮动内容，否则浮动内容会挂出并没有高度。
我明白了。谢谢你的解释！

【解决方案3】：

.nav 应具有以下样式：

  .nav {
position: relative;
display: block;
width: 100%;
background: #34495e;
height:100px;
}

让我知道它是否成功！

【讨论】：

这个解决方案也不是很疯狂。它没有响应，我正在为多种设备进行设计。这需要我为许多设备外形设计一个合适的高度。