CSS Floats 似乎在标题中不起作用答案

【问题标题】：CSS Floats does not seem to work in headerCSS Floats 似乎在标题中不起作用
【发布时间】：2016-07-15 11:06:09
【问题描述】：

我正在制作包含品牌徽标和导航的标题。标头本身包含在一个名为容器的 div 中。标记就像 -

<div class="container">
    <div class="head">
        <div class="brand>Brand Name</div>
        <div class="nav'>Nav content Here</div>
    </div>
</div>

我使用的 CSS 是这样的

.container{
    width:100%;
    margin:10% auto;
}
.head{
    float:left;
    width:100%
}
.brand{
    float:left;
    margin:0 3%;
    width:auto;
}
.nav{
    float:right;
    margin:0 3%;
    width:auto
}

问题是所有内容都从 Main container <div> 流出，并且容器的高度为 0px。内容按我想要的方式显示，但主容器的高度为 0px。

我想并排显示品牌徽标和导航。如果你能对代码做一个小提琴，那就太好了。提前致谢。

编辑：很抱歉在发布问题之前没有进行研究。 Clearfix hack 可以挽救生命，但也有几种不同的方法。在这里列出 - How do you keep parents of floated elements from collapsing?

【问题讨论】：

标签： html css css-float

【解决方案1】：

您可以使用 clearfix hack 解释 here

html:

<div class="container clearfix">
<div class="head">
    <div class="brand">Brand Name</div>
    <div class="nav">Nav content Here</div>
</div>

css:

.container{
    width:100%;
    margin:10% auto;
}
.head{
    float:left;
    width:100%
}
.brand{
    float:left;
    margin:0 3%;
    width:auto;
}
.nav{
    float:right;
    margin:0 3%;
    width:auto
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Fiddle here

【讨论】：

谢谢。它让我省了很多麻烦

【解决方案2】：

您收到了html 问题：

<div class="brand>Brand Name</div>

和：

<div class="nav'>Nav content Here</div>

我修好了这些，它工作得很好！不改变你的`css

<div class="container">
    <div class="head">
        <div class="brand">Brand Name</div>
        <div class="nav">Nav content Here</div>
    </div>
</div>

jsFiddle

【讨论】：

【解决方案3】：

您必须像这样对 .container div 使用 clearfix：Demo 以自动清除其具有浮动的子元素。

<div class="container clearfix">
  <div class="head">
    <div class="brand">Brand Name</div>
    <div class="nav">Nav content Here</div>
  </div>
</div>

这里更正了 HTML 语法错误

【讨论】：

【解决方案4】：

    <div class="brand>Brand Name</div>
    <div class="nav'>Nav content Here</div>

改成

<div class="brand">Brand Name</div>
<div class="nav">Nav content Here</div>

【讨论】：