两个div之间的匿名空格

Question

这是Fiddle,

我有两个divs一个用于标题，另一个用于主体。在标题的div内，我有另一个div，而div是floated left。由于floating，在这两个divs之间出现了一个空格（在标题的div和主体的div之间）。

[注意：请参阅小提琴的css部分中的#DivLogo

我的问题是，为什么这种问题因浮动而引发。

Answer 1

将#DivHeader设为inline-block是一件神器。将其更改为display: block并将overflow: hidden;设置为包含浮点数。见http://jsfiddle.net/jhcUb/

Answer 2

应用

float:left;

到#DivHeader以包含它的后代

除去

position:relative;

来自#DivMain

请参阅fiddle

Answer 3

为什么使用内联块的行为

您的原始CSS如下：

#DivHeader
{
    position:relative;
    display:inline-block;
    width:100%;
    font-family: Century Gothic, sans-serif;
    background-color:#3b5998;
}

#DivHeader有两个子元素，一个是浮动的，一个是绝对定位的，因此，不会对#DivHeader的高度做出贡献。

假设您已设置display: block，您会看到从页面左上角绘制的红色背景，您将看不到标题。

这是因为您将#DivMain设置为position: relative，因此您创建了一个新的堆叠上下文，该上下文绘制在先前渲染的元素上。

如果您已将position: static设置为#DivMain，则会看到来自浮动元素的标题内容。

因此，通过使用#DivHeader返回display: inline-block，该元素现在可识别HTML文档中的空白区域，创建一个匿名内联框，这意味着#DivHeader现在具有内容。由于浮动后有空白区域，这意味着浮动产生的间隙有助于内联块，您可以看到背景颜色等。

在DivHeader设置overflow: auto和display: block上轻松解决问题。

还有一件事，如果你没有浮动#DivLogo，你就不会看到问题，因为徽标元素中较大的字体大小会使基线移动得足够，以便内联块识别空白区域没关系。

这里有点进展！

Answer 4

查看http://jsfiddle.net/y6hSV/3/

<强> HTML

<div id="DivHeader">

    <div id="DivLogo">

    <span class="Logo" id="SpLogo">Header</span><br/>
    <span class="Logo" id="SpSlogan">{sub header}</span>

    </div>

    <div id="DivPrabhu">
        <a  href="http://google.com">Who?</a>
        <a  href="https://www.facebook.com">Connect</a>
        <a href="#">Feedback/Bugs</a>
    </div>

</div>

<div id="DivMain">
 Some text to have layout
</div>

<强> CSS

html,body
{
margin:0;
padding:0;
}

#DivHeader
{
float: left;
width:100%;
font-family: Century Gothic, sans-serif;
background-color:#3b5998;
}

#DivLogo
{
    position:relative;
    float:left;         /*please remove this property and run*/ 
    padding-bottom:10px;
    padding-top:10px
}

.Logo
{
    margin-left:20px;
    margin-right:20px;
    color:#fff; 
}

#SpLogo
{

    font-size:35px;
    font-weight:bold;
}

#SpSlogan
{
    font-size:20px;
}

#DivPrabhu{
    float: right;
    margin-top: 30px;
    font-size:13px;
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}


#DivPrabhu a{
    text-decoration:none;
    color:#fff;
    margin-left:15px;
}

#DivPrabhu a:hover{
    text-decoration:underline;
}

#DivMain{
    height:600px;
    width; 100%;
    background-color:red;
}

Answer 5

将top: -5px;添加到#DivMain可以解决您的问题！ ：）

查看小提琴here。