html - 为什么 div 会出现在主 div 容器之外？

Question

我刚开始学习 HTML 和 CSS。在学习教程时，我只是想到了一些实验。

问题是：

为什么底部<div>s 在 main 之外<div>？

是因为浮动属性吗？我认为是，如果真的是这样，我如何将这些浮动底部 div 包含到红色主容器 div 中？

有类似的问题，比如这个CSS Float Logic但对于初学者来说有点复杂。

.clr {
  clear: both;
}

.container {
  width: 80%;
  margin: auto;
  border: 2px solid royalblue;
  background-color: red;
}

.block {
  float: left;
  width: 33.3%;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

#main-block {
  float: left;
  width: 70%;
}

#sidebar {
  float: right;
  width: 30%;
  background-color: #333;
  color: #ffffff;
  padding: 15px;
  box-sizing: border-box;
  margin: 0;
}

<div class="container">

  <div class="block">
    <h3>Heading</h3>
    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract
      from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.</p>
  </div>


  <div class="block">
    <h3>Heading</h3>
    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract
      from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.</p>
  </div>


  <div class="block">
    <h3>Heading</h3>
    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract
      from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.</p>
  </div>

  <div class="clr"></div>

  <div id="main-block">
    <h3>Heading</h3>
    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”
    </p>
  </div>

  <div id="sidebar">
    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” .
    </p>
  </div>

</div>

标签： htmlcsscss-float

Answer 1

我认为问题在于

<div class="clr"></div>

你应该把它放在容器的末端。然而更好的解决方案是使用 css 解决这个问题。不是 HTML 代码。如下：

.container:after{
   display: block;
   clear: both;
   content: "";
   height: 0;
   overflow: hidden;
}