为什么 div 会出现在主 div 容器之外？ [复制]

Question

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

问题是：

为什么底部的<div>s 超出了主要的<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>

Answer 1

我认为问题出在

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

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

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

Answer 2

你写道：

我刚开始学习 HTML 和 CSS。

那么您为什么要专注于布局的浮动？这是一种过时的方法。

CSS 现在拥有 Flexbox 和 Grid 技术，这些技术具有广泛的浏览器支持，并已准备好用于生产网站。

用于在图像周围环绕文本的浮动一直是构建布局的一种技巧，因为 CSS 没有提供更好的东西。随着 CSS3 的出现，情况不再如此。

不要浪费时间学习如何使用浮动构建布局。

试试这个（使用 CSS Grid）：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  width: 80%;
  padding: 10px;
  margin: auto;
  border: 2px solid royalblue;
  background-color: red;
}

.block {
  grid-row: 1;
}

#main-block {
  grid-row: 2;
  grid-column: 1 / 3;
}

#sidebar {
  grid-row: 2;
  background-color: #333;
}

.block, #main-block, #sidebar {
  padding: 10px;
  border: 1px solid #ccc;
}

* {
  box-sizing: border-box;
}

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