Html CSS中的浮动-当浮动到右侧时，间隙/空间在顶部左侧？

这有点难以描述，但我的页面上浮动的div基本上留下了不需要的空间。下面是描述问题的图片。黑匣子是div

浮动前：

浮动后：

预期效果：

我不确定这是否有区别，但我也有一个空div，在浮动div后面紧跟着“clear:tware”

---

如何实现此目的？

删除清除div。同时检查这些div上的填充/边距，确保包含div（父div）的宽度足以容纳两个子div。

第一个

div

应设置

float:left

。否则，第一个div（块元素）将占用其自身的所有垂直空间。

问题是您只浮动一个div。您需要使非浮动div上的边距与浮动div的总空间（宽度+填充+边距）相同

或者你也可以同时浮动两个div

示例：

<div id="container" style="width: 410px;">
<div style="float: right; width: 200px;">
  <p> Right div</p>
</div>
<div style="width: 200px; margin-right: 210px;">
  <p> Left Div</p>
</div>
<div style="clear:both;"></div>
</div>

右分区

左Div

或：

左Div

右分区

如果可能，将

浮点：右

div

放在HTML中未浮点的

div

之前。

a1
<div class="a1">a1</div>
<div class="a2">a2</div>

.a1
{
 background-color:Red;
  width:200px;
  height:200px;
float:left; 
}
.a2
{
  background-color:Green;
  width:200px;
  height:200px;
  float:left;
}

a2
.a1
{
背景色：红色；
宽度：200px；
高度：200px；
浮动：左；
}
.a2
{
背景颜色：绿色；
宽度：200px；
高度：200px；
浮动：左；
}

---

======试试这个

两个div都应该向左浮动，并确保它们等于或小于所在容器的宽度

如果a1显示为浮动在a2的右侧，则必须将a1放在html的第一位，然后将其向右浮动。有点违反直觉，但这是浮动的工作方式

<div class="container">
  <div class="a1">a1</div>
  <div class="a2">a2</div>
</div>
<style>
div
{
  border: solid 2px #000;
  background-color: #eee;
}
.a1
{
 background-color:Red;
  width:200px;
  height:200px;
float:right; /* the trick is, a1 appears BEFORE a2 in the html, yet
we are floating a1 right .  if you do it the other way around
( try and float a2 ) then it will work like you showed
(separate line)*/
}
.a2
{
  background-color:Green;
  width:200px;
  height:200px;
  /* don't float this one */

}
</style>

a1
a2
div
{
边框：实心2px#000；
背景色：#eee；
}
.a1
{
背景色：红色；
宽度：200px；
高度：200px；
float:right；/*诀窍是，在html中a1出现在a2之前，但
我们正朝着正确的方向浮动。如果你从另一个方向做的话
（试着浮动a2）然后它会像你展示的那样工作
（单行）*/
}
.a2
{
背景颜色：绿色；
宽度：200px；
高度：200px；
/*别让这个浮起来*/
}

HTML
废话废话废话
这是边上的
CSS
分区#集装箱
{
宽度：80%；//您的偏好
高度：自动；
页边距：0自动；//使页面居中
}
主分区
{
宽度：70%；
高度：自动；
display:block；//将其包裹在其宽度内
float:left；//向左浮动
}
除名
{
宽度：30%；//占据宽度大小的其余部分
高度：自动；
显示：块；
浮动：右；//向右浮动
}
#清楚的
{
清除：两者；//这就可以了
}

浮动存在空白问题。这就是为什么第二个盒子稍微低一点

<div style="float:left">a1</div><div style="float:left">a2</div>

a1a2

会有用的

<div style="float:left">a1</div>
<div style="float:left">a2</div> 

a1
a2

---

无法工作

我们可以看到导致此问题的CSS和HTML吗？我尝试浮动两个div，但这并不能立即解决我的问题。问题是，有一个流氓div（未浮动）挂在中间，仍然造成与上述相同的效果。在将这个div移到最左边的div中之后，我能够达到正确的效果。下面的答案帮助我找到了答案。谢谢大家的回答。

<div style="float:left">a1</div><div style="float:left">a2</div>

<div style="float:left">a1</div>
<div style="float:left">a2</div>