Html CSS在绝对容器之后添加容器，该绝对容器已经有其他3个浮动容器

我想在已经有其他3个浮动容器的绝对容器之后添加一个容器

我没有机会尝试过clearfix和其他CSS黑客

您可以看到我的绿色容器不显示前6行

请添加CSS解决方案，不要使用JS或jQuery解决方案

在这里：

#主容器{
位置：绝对位置；
宽度：100%；
边框：3px固体#0A74B4；
背景色：红色；
高度：自动；
}
img.img1stdiv{
最大宽度：128px；
最大高度：128px；
}
.My1贷款{
宽度：15%；
显示：块；
位置：相对位置；
浮动：左；
保证金权利：2%；
}
.my2floated{
宽度：56%；
显示：块；
位置：相对位置；
浮动：左；
保证金权利：2%；
}
.MY3浮动{
位置：相对位置；
浮动：左；
宽度：25%；
显示：块；
右边距：0；
}
#其他容器之后{
背景颜色：绿色；
宽度：100%；
高度：自动；
}

我的头衔在这里
支持信息在此
此容器的内容物应位于主容器之后，主容器内有3个浮动容器。
第1行


第2行


第3行


第4行


第5行


第6行


第7行


第8行


第9行


第10行

浮动元素不遵循自然文档流，因此可能会出现类似的布局问题。您可以通过如下更改CSS来解决此问题：

#themaincontainer {
  float: left; /* Use this instead of position: absolute */
  width: 100%;
  border: 3 px solid #0A74B4;
  background-color: red;
  height: auto;
}

#othercontainerafter {
  background-color: green;
  width: 100%;
  height: auto;
  float: left; /* Added */
  clear: both; /* To avoid elements will end up next to each other */
}

拨弄

或者，使用flexbox代替浮动

#主容器{
显示器：flex；
柔性包装：包装；
宽度：100%；
}
#集装箱-1{
边框：3px固体#0A74B4；
背景色：红色；
显示器：flex；
宽度：100%；
}
img.img1stdiv{
最大宽度：128px；
最大高度：128px；
}
.My1贷款{
宽度：15%；
保证金权利：2%；
}
.my2floated{
宽度：56%；
保证金权利：2%；
}
.MY3浮动{
宽度：25%；
}
#集装箱-2{
背景颜色：绿色；
宽度：100%；
}

我的头衔在这里
支持信息在此
此容器的内容物应位于主容器之后，主容器内有3个浮动容器。第1行

第2行

第3行

第4行

第5行

第6行

第7行

第8行

第9行

第10行

将位置更改为相对，因为绝对使div浮动。相对位置将强制主div排在第一位，并在其后显示其他div

我编辑了上面#mainDiv的风格。复制粘贴就行了

---

使用

width:100%

，因此无需

position:absolute

，当设置为absolute或fixed时，元素将从文档的正常流中完全移除

将主容器更改如下：

我的头衔在这里
支持信息在此
此容器的内容物应位于主容器之后，主容器内有3个浮动容器。
第1行
第2行
第3行
第4行
第5行
第6行
第7行
第8行
第9行
第10行

10倍的答案。如果主容器也向左浮动，并且此主容器已经有3个浮动容器，则会正确显示主容器后面的其他容器。问题是为什么？（这是CSS技巧吗？）。不是CSS技巧，浮动就是这样工作的。现在flexbox比float更受欢迎。我提供了一个使用flexbox的示例，以便您进行比较。我接受了这个解决方案。今天我学到了一些新东西：1。浮动左主容器（已经有3个浮动容器）让我在他之后显示其他容器。2.关于CSS flexbox的大量信息。10倍！答案是10倍-我知道使用相对位置应该有效，但主要问题本身是：…在绝对容器之后。如果您希望显示为逐行形式，那么您应该使用相对位置，因为绝对位置使属性独立，并中断显示的正常流程。不管怎样，有人回答了你的问题，干杯：）位置：绝对；这样我就取消了我自己的问题：“……在绝对容器之后”。您的解决方案与其他参与者一样有效。为什么使用

position:absolute

？无需

position:absolute

，当设置为绝对或固定时，元素将完全从文档的正常流中删除。

#themaincontainer {
    position: relative;
    width: 100%;
    border: 3 px solid #0A74B4;
    background-color: red;
    height: auto;
    display: inline-block;
}

#themaincontainer {
    position: absolute; <-----------------Removed
    width: 100%;
    border: 3  px solid #0A74B4;<----------3  px is Wrong,3px is correct.
    background-color: red;
    height: auto;
    overflow: hidden;<-------------------Added
}