CSS 花车似乎在 header 中不起作用

Question

我正在开发一个包含品牌徽标和导航的 header。 header 本身包含在一个 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。

我想并排显示品牌标志和导航。如果你能用代码做一个 fiddle 就太好了。提前致谢。

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

Answer 1

您必须像这样对 .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 语法错误

Answer 2

您可以使用 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

Answer 3

你有 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

Answer 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>

CSS 花车似乎在 header 中不起作用

CSS Floats does not seem to work in header

html

css

css-float