为什么 divs 会超出主 div 容器？

Question

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

问题是：

为什么底部 <div>s 会超出主要 <div>？

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

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

.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

您写道：

I just started learning HTML and CSS.

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

CSS 现在拥有 Flexbox 和 Grid 技术，这些技术得到了广泛的浏览器支持，并且可以用于生产网站。

用于在图像周围环绕文本的浮点数一直是构建布局的黑客，因为 CSS 没有提供更好的选择。随着 CSS3 的出现，情况已不再如此。

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

试试这个（使用 CSS 网格）：

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

为什么 divs 会超出主 div 容器？

Why do divs go outside the main div container?

html

css

css-float