CSS中的浮动 - 向右浮动时，顶部留下的间隙/空间？答案

【问题标题】：Floats in CSS - Gap/space left on top when floated to the right?CSS中的浮动 - 向右浮动时，顶部留下的间隙/空间？
【发布时间】：2013-05-24 07:50:29
【问题描述】：

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

浮动前：

浮动后：

想要的效果：

我不确定这是否有区别，但我也有一个空的 div，在浮动的 div 之后立即放置了“clear: both”。

我怎样才能做到这一点？

【问题讨论】：

我们能看到导致这个问题的 CSS 和 HTML 吗？
我尝试浮动两个 div，但这并没有立即解决我的问题。问题是中间有一个流氓 div（未浮动），仍然产生与上面相同的效果。将这个 div 移到最左边的内部后，我能够达到正确的效果。下面标记的答案是帮助我弄清楚的答案。谢谢大家的回答。

标签： html css css-float

【解决方案1】：

如果可能，请将float: right div 放在 HTML 中未浮动的 div 之前。

【讨论】：

【解决方案2】：

<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;
}

=======试试这个

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

第一个div 应该设置float: left。否则第一个 div 是一个块元素，它将占据自己所有的垂直空间。

【讨论】：

【解决方案5】：

HTML
<div id="container">
   <div id="main">
     blah blah blah blah blah
   </div>
   <div id="aside">
   this goes to the side
   </div>
   <div id="clear"></div>
</div>

CSS
div#container
{
    width : 80%;//your preference
    height : auto;
    margin : 0 auto;//Centers the page
}

div#main
{
    width : 70%;
    height : auto;
    display : block;//to wrap it up inside its width
    float : left;//float it towards left
}

div#aside
{
    width : 30%;//take up rest of the width size
    height : auto;
    display : block;
    float :right;//float towards right
}

#clear
{
    clear : both;//this will do the job
}

【讨论】：

【解决方案6】：

问题是你只浮动一个 div。您需要使非浮动div上的margin-right与浮动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 id="container" style="width: 410px;">

<div style="float: left; width: 200px; margin-right: 10px;">
  <p> Left Div</p>
</div>
<div style="float: left; width: 200px;">
  <p> Right div</p>
</div>
<div style="clear:both;"></div>
</div>

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

如果 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>

【讨论】：

【解决方案9】：

浮点数存在空白问题。这就是为什么第二个框略低的原因。

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

会起作用的。

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

不会工作

【讨论】：