Question

我不明白为什么我的标题格式（背景黄色）不起作用。当我删除＆＃34; float：left;＆＃34;来自＆＃34;左撇子＆＃34;和＃34;右头＆＃34; ids，它的工作原理。

有什么想法吗？很难用语言表达这个问题，所以希望你能理解我用下面的代码说的话。非常感谢！

＆＃13;

header {
  background-color: yellow;
  /*why doesn't this work? */
}
#lefthead {
  float: left;
  width: 50%;
  text-align: center;
  background-color: blue;
}
#righthead {
  float: right;
  text-align: center;
  width: 50%;
}

＆＃13;

<header>
  <section id="lefthead">
    <h1>It's My High School</h1>
  </section>

  <section id="righthead">
    <h1>Me and my minions </h1>
  </section>

</header>
<section style="clear:both;">
  <h1>blah and stuff and all</h1>
</section>

＆＃13;

Answer 1

您遇到此问题的原因是float实际上如何运作。当你构建一个容器元素时，浮动子元素内的子元素将不会向父元素，容器应用任何高度。

由于标记的结构，您立即float这些子元素，这不会增加高度，因此background: yellow;实际上从未显示。如果您添加height或padding，则会显示颜色。

您可以在float here上阅读更多内容。

这将立即显示您的背景：

header {
     height: 4.3rem;
     background: yellow;
}

更新:(展示Clearfix，正确的方法）

您可以通过将clearfix应用于解决方案来解决您的问题。例如，您可以按以下方式构建标记：

<header>
     <div class="Clearfix">
          <section id="Left-Head">
               <h1>Sample Solution</h1>
          </section>
          <section id="Right-Head">
               <h3>Content</h3>
          </section>
     </div>
</header>

然后，您将使用现有的样式信息，但将以下内容添加为Clearfix。

.Clearfix:before, .Clearfix:after {
     height: 0rem;

     content: '';
     display: block;
     clear: both;
}

然后背景会正确附加。

完整解决方案：

header {
     background: yellow;
}

.Clearfix:before, .Clearfix:after {
      height: 0rem;

      content: '';
      display: block;
      clear: both;
}

#Left-Head {
     width: 50%;
     background: blue;
     float: left;
}

#Right-Head {
     width: 50%;
     float: right;
}

h5 {
     clear: both;
}

<header>
 <div class="Clearfix">
      <section id="Left-Head">
           <h1>Sample Solution</h1>
      </section>
      <section id="Right-Head">
           <h3>Content</h3>
      </section>
 </div>
</header>
<h5>Lorem Ipsum...</h5>

Answer 2

编辑：

将'标题'变成了课程。

请参阅代码段。

.header {
  background-color: yellow;
  height: 72px;
  width: 100%;
 }

.lefthead {
  float: left;
  width: 50%;
  text-align: center;
  background-color: blue;
}
.righthead {
  float: right;
  text-align: center;
  width: 50%;
}

<div class="header">
  
  <section class="lefthead">
    <h1>It's My High School</h1>
  </section>

  <section class="righthead">
    <h1>Me and my minions </h1>
  </section>

</div>

<section style="clear:both;">
  <h1>blah and stuff and all</h1>
</section>

Answer 3

header {
  background-color: yellow;
  /*why doesn't this work? */
}
#lefthead {
  float: left;
  width: 50%;
  text-align: center;
  background-color: blue;
}
#righthead {
  float: right;
  text-align: center;
  width: 50%;
}
.clear{clear:both}

<header>
  <section id="lefthead">
    <h1>It's My High School</h1>
  </section>

  <section id="righthead">
    <h1>Me and my minions </h1>
  </section>
<section class="clear">
</header>

  <h1>blah and stuff and all</h1>
    </section>

标题和节的浮点问题

3 个答案: