CSS如何强制容器显示在元素向左浮动的前一个容器下面

我希望显示“D”的div显示在显示“A”的div的下方，以便具有匹配背景颜色的div彼此重叠。然而，我得到的是：

我必须在CSS代码中的什么位置清除浮点

#容器{
背景色：#333333；
宽度：990px；
}
#左{
背景色：红色；
宽度：300px；
浮动：左；
}
#分离器{
背景颜色：绿色；
宽度：90px；
浮动：左；
}
#对{
背景颜色：蓝色；
宽度：200px；
浮动：左；
}

A.
B
C
D
E
F

.集装箱{
背景色：#333333；
宽度：990px；
显示：块；
明确：两者皆有；
}
#左{
背景色：红色；
宽度：300px；
浮动：左；
}
#分离器{
背景颜色：绿色；
宽度：90px；
浮动：左；
}
#对{
背景颜色：蓝色；
宽度：200px；
浮动：左；
}
A.
B
C
D
E
F

结果是

---

清除容器中的浮子。 有3种简单的方法可以做到这一点：

1。浮动

#container {
  clear: both;
}

2。溢出

#container {
  overflow: hidden;
}

3。Micro clearfix黑客攻击

---

兄弟，这是你想要做的。。 这是通过使用

display:inlineblock

这是通过使用

float:left

---

不要使用

id

我建议使用

class

isntead，因为

id

只调用一次。

您必须处理浮点数，为此，您需要了解浮点数是什么：

有几种方法可以做到这一点，在阅读了一些有关浮动、清除和块格式化上下文的内容后，您应该了解这些方法

（下面代码段中的最后一个示例是oldish，它甚至可以避免浮动，但不影响布局）

/*演示目的：显示该容器上使用的id或类*/
章节：之前{
内容：attr（id）'attr（class）；
显示：表格；
背景：177EE5；
填充物：5px；
保证金：5px；
颜色：#fff；
文本阴影：0 0 1px黑色、0 0 1px黑色、0 0 1px黑色、0 0 1px黑色、0 0 1px黑色、0 0 1px黑色；
字母间距：1px；
字体变体：小大写字母；
}
/*由于用于许多标记，您的css变成了有效的类*/
.集装箱{
背景色：#333333；
宽度：990px；
}
.左{
背景色：红色；
宽度：300px；
浮动：左；
}
.拆分器{
背景颜色：绿色；
宽度：90px；
浮动：左；
}
.对{
背景颜色：蓝色；
宽度：200px；
浮动：左；
}
/*每个示例的包装器*/
部分{
明确：两者皆有；
溢出：隐藏；
边缘：1米；
}
/*所示的不同方法，仅当您阅读了有关浮动的内容并进行了一些挖掘时，才可用于测试*/
/*桌子*/
.桌子.容器{
显示：表格；
}
/*溢出*/
.溢出.容器{
溢出：隐藏；
}
/*浮动*/
.浮式集装箱{
浮动：左；
}
/*弯曲*/
.flex.容器{
显示器：flex；
}
/*内联块*/
.inline块.container{
显示：内联块；
垂直对齐：顶部；
}
/*最后一个没有浮动的示例*/
/*无浮动&ie8*/
#表分区{
浮动：无
}
#表#第一行，
#表>分区{
显示：表格行；
}
#表>分区>分区{
显示：表格单元格；
}
#桌子{
背景色：#333333；
宽度：990px；
表布局：固定；
}
#左{
宽度：300px；
}
#分离器{
宽度：90px；
}
#对{
宽度：200px；
}
#表>分区>分区{
背景色：红色；
}
#表>分区>分区+分区{
背景颜色：绿色；
}
#表>分区>分区+分区+分区{
背景颜色：蓝色；
}
#表：之前{
显示：表格标题；
宽度：100%；
保证金：0；
}
#表>分区：之后{
内容：“注意这里有一个空白需要填补，因为COL不包括990px”；
显示：表格单元格；
}

A.
B
C
D
E
F
A.
B
C
D
E
F
A.
B
C
D
E
F
A.
B
C
D
E
F
A.
B
C
D
E
F
A.
B
C
D
E
F
另一种没有浮动的方式，包括IE8

A.
B
C
D
E
F

你有没有试过显示：block我在哪里插入它？我在我的答案bro上发布了答案plz check it@rvelContry checking..这里是小提琴，你不能在同一个文档中有两个属性值相同的元素<代码>id每个文档必须是唯一的。它不起作用。覆盖显示：块；显示：块；（块元素的默认值）此“解决方案”仍然有两个容器，其值相同。无效HTML。

左侧

，

拆分器

和

右侧

仍然重复

id

s.

左边距：-4px不是与空白相关的
内联块
布局问题的最佳解决方案。解决此问题的标准方法是设置
.container{font size:0；}
，然后在子项上重新设置所需的字体大小。第一个解决方案，但它没有提到OP代码中重复的
id
s。这无法解决OP代码中重复的
id
问题。
#container {
  overflow: hidden;
}

.container {
  background-color: #333333;
  width: 990px;
  display: block;
  position: relative;
}
.left {
  background-color: red;
  width: 300px;
  display: inline-block;
  margin-left: -4px;
}
.splitter {
  background-color: green;
  width: 90px;
  display: inline-block;
  margin-left: -4px;
}
.right {
  background-color: blue;
  width: 200px;
  display: inline-block;
  margin-left: -4px;
}