Html 为什么div要离开主div容器？

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

问题是:

为什么底部的

在主

之外？

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

也有类似的问题，像这样，但对于初学者来说有点复杂

.clr{
明确：两者皆有；
}
.集装箱{
宽度：80%；
保证金：自动；
边框：2件纯蓝；
背景色：红色；
}
.街区{
浮动：左；
宽度：33.3%；
边框：1px实心#ccc；
填充：10px；
框大小：边框框；
}
#主块{
浮动：左；
宽度：70%；
}
#边栏{
浮动：对；
宽度：30%；
背景色：#333；
颜色：#ffffff；
填充：15px；
框大小：边框框；
保证金：0；
}

标题
“Lorem ipsum dolor sit amet，Concertetur Adipising Elite，sed do eiusmod Temporal Incidedut ut labore et dolore magna aliqua。”Lorem ipsum的目的是创建一个自然的文本块（句子、段落、页面等），不会分散注意力
从布局上看。这种做法并非没有争议，当重点放在设计上而不是内容上时，用无意义的填充文本布局页面可能非常有用

标题
“Lorem ipsum dolor sit amet，Concertetur Adipising Elite，sed do eiusmod Temporal Incidedut ut labore et dolore magna aliqua。”Lorem ipsum的目的是创建一个自然的文本块（句子、段落、页面等），不会分散注意力
从布局上看。这种做法并非没有争议，当重点放在设计上而不是内容上时，用无意义的填充文本布局页面可能非常有用

标题
“Lorem ipsum dolor sit amet，Concertetur Adipising Elite，sed do eiusmod Temporal Incidedut ut labore et dolore magna aliqua。”Lorem ipsum的目的是创建一个自然的文本块（句子、段落、页面等），不会分散注意力
从布局上看。这种做法并非没有争议，当重点放在设计上而不是内容上时，用无意义的填充文本布局页面可能非常有用

标题
“Lorem ipsum door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。”

“Lorem ipsum door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。”。

我认为问题在于

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

你写道：

我刚开始学习HTML和CSS

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

CSS现在拥有Flexbox和网格技术，它们拥有广泛的浏览器支持，并可用于制作网站

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

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

请尝试以下方法（使用CSS网格）：

.container{
显示：网格；
网格模板柱：1fr 1fr 1fr；
栅隙：10px；
宽度：80%；
填充：10px；
保证金：自动；
边框：2件纯蓝；
背景色：红色；
}
.街区{
网格行：1；
}
#主块{
网格行：2；
网格柱：1/3；
}
#边栏{
网格行：2；
背景色：#333；
}
.block、#主块、#侧栏{
填充：10px；
边框：1px实心#ccc；
}
* {
框大小：边框框；
}

标题
“Lorem ipsum dolor sit amet，Concertetur Adipising Elite，sed do eiusmod Temporal Incidedut ut labore et dolore magna aliqua。”Lorem ipsum的目的是创建一个自然的文本块（句子、段落、页面等），不会分散注意力
从布局上看。这种做法并非没有争议，当重点放在设计上而不是内容上时，用无意义的填充文本布局页面可能非常有用

标题
“Lorem ipsum dolor sit amet，Concertetur Adipising Elite，sed do eiusmod Temporal Incidedut ut labore et dolore magna aliqua。”Lorem ipsum的目的是创建一个自然的文本块（句子、段落、页面等），不会分散注意力
从布局上看。这种做法并非没有争议，当重点放在设计上而不是内容上时，用无意义的填充文本布局页面可能非常有用

标题
“Lorem ipsum dolor sit amet，Concertetur Adipising Elite，sed do eiusmod Temporal Incidedut ut labore et dolore magna aliqua。”Lorem ipsum的目的是创建一个自然的文本块（句子、段落、页面等），不会分散注意力
从布局上看。这种做法并非没有争议，当重点放在设计上而不是内容上时，用无意义的填充文本布局页面可能非常有用

标题
“Lorem ipsum door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。”

“Lorem ipsum door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。”。

太棒了！谢谢！它解决了这个问题，同时，我从您那里了解了这个

状态。不再使用
div clr.
Awesome！伟大的我从2017年开始参加这个速成班。。。。谢谢你的新信息。
.container:after{
   display: block;
   clear: both;
   content: "";
   height: 0;
   overflow: hidden;
}