【问题标题】:What is the wrong with my CSS code?我的 CSS 代码有什么问题?
【发布时间】:2015-02-07 15:28:04
【问题描述】:

我正在使用 html 和 css 构建主题,但无法正常工作。为什么背景颜色不显示?什么是错误的 CSS 代码?我找不到导致问题的错误。谁能帮我解决它?

header {
  background-color: blue;
}
#main-header {
  width: 1170px;
  margin: 0 auto;
}
#main-header h1 {
  float: left;
}
#main-header nav {
  float: right;
}
<header>
  <section id="main-header">
    <h1>SITE NAME</h1>
    <nav>
      <ul>
        <li>HOME</li>
        <li>ABOUT</li>
        <li>SERVICE</li>
        <li>PORTFOLIO</li>
        <li>CONTACT</li>
      </ul>
    </nav>
  </section>
  <section>
  </section>
</header>

【问题讨论】:

标签: html css


【解决方案1】:

由于您的容器包含浮动元素,它的高度等于零,除非您通过 CSS 设置 heightmin-height,否则 不是最佳解决方案。下面解释了所有已知的清除浮动元素的解决方案:

安全和传统的方式:浮动(全部!)容器

在这种情况下,您使浮动元素的所有容器同样浮动,并像这样设置width,

header {
 background-color: blue;
 float:left;
}

#main-header nav {
  float: right;
  background:red;
  width:50%
}

Live example

陷阱在于它会影响布局,你必须处理它,将浮动应用到所有父级,随之而来的是无尽的瀑布式 CSS...

回溯方式:用非语义元素清除

您可以在父项的结束标记之前插入一个 void 元素来清除浮动,如下所示:

  [CSS]
   .clear-all {clear:both;}

  [HTML]
  <header>
   .....
   <span class="clear-all"></span>
  </header>

陷阱是span 元素或其他元素不是语义的。

又快又脏的方式:溢出:隐藏

overflow: hidden 设置为父/容器,它可以定义其边界。 陷阱是,如果你的layed必须有元素重叠容器,你买不起。

现代方式:clearfix:after

通过阅读这篇Css-tricks 文章,您可以了解到:

Easy Clearing Method 使用巧妙的 CSS 伪选择器 (:after) 来清除浮动。与其在父级上设置溢出,不如向其应用一个附加类,如“clearfix”。然后应用这个 CSS:

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
 }

在我看来,这是清除浮动的最佳、简洁、克制的方式。

【讨论】:

    【解决方案2】:

    您正在使用浮动元素,因此父元素(在本例中为标题)将具有零高度值,您需要做的是添加另一个元素以清除浮动,例如:

    还有一件事,定义标题高度也可以解决问题,但这是一种不好的做法,尤其是在您处理响应式布局时,或者如果您需要在标题中添加或删除一些内容。

    header {
      background-color: blue;
    }
    #main-header {
      width: 1170px;
      margin: 0 auto;
    }
    #main-header h1 {
      float: left;
    }
    #main-header nav {
      float: right;
    }
    .clearfix {
      clear:both;
    }
    <header>
      <section id="main-header">
        <h1>SITE NAME</h1>
        <nav>
          <ul>
            <li>HOME</li>
            <li>ABOUT</li>
            <li>SERVICE</li>
            <li>PORTFOLIO</li>
            <li>CONTACT</li>
          </ul>
        </nav>
      </section>
      <section>
      </section>
      <div class="clearfix"></div>
    </header>

    【讨论】:

      【解决方案3】:

      您可以执行以下两个选项:

      header { 
       ...
       overflow:auto; 
       min-height:10px; /*or what vere you thing would be ideal for default*/
      

      }

      【讨论】:

        【解决方案4】:

        您可以使用overflow css 属性(例如auto)来清除float 的高度效果:

        header { overflow:auto; }
        

        JSFiddle

        【讨论】:

          【解决方案5】:

          您需要清除浮动元素。这意味着您必须在浮动元素之后放置一个具有clear:both CSS 属性的元素。我推荐使用::after pseudo selector:

          #main-header::after {
              content: '';
              display: block;
              clear: both;
          }
          

          这将自动清除您的浮动,而无需您创建其他元素。

          【讨论】:

          【解决方案6】:

          因为您没有任何非浮动元素来“构建”标题内的高度,并且没有具体定义高度。

          定义它时会发生以下情况:

          header {
            background-color: blue;
            height: 150px;
          }
          #main-header {
            width: 1170px;
            margin: 0 auto;
          }
          #main-header h1 {
            float: left;
          }
          #main-header nav {
            float: right;
          }
          <header>
            <section id="main-header">
              <h1>SITE NAME</h1>
              <nav>
                <ul>
                  <li>HOME</li>
                  <li>ABOUT</li>
                  <li>SERVICE</li>
                  <li>PORTFOLIO</li>
                  <li>CONTACT</li>
                </ul>
              </nav>
            </section>
            <section>
            </section>
          </header>

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2011-07-28
            相关资源
            最近更新 更多