html - 关于 float div 父级的 Css

Question

我有如下布局的网页。css文件内容如下。

#green{
border:20px solid #3D3;
float:left;
display:block;
}
#orange{
width:100px;
height:100px;
border:10px solid orange;
float:left;
}

.child{
 border:10px solid black;
 display:inline-block;
 margin:0px;
}
.parent{
  border:10px solid #f00;
  display:table;
  padding:0px;
  margin:0px;
  }

  .clear{
   clear:both;
  }

html内容如下。

 <div class="parent">
  <div class="child">
   <div id='green'> </div>
   <div id="orange"></div>
   <div class="clear"> </div>
  </div>
 </div>

我得到的渲染结果如下。

为什么我的布局中有白色间隙？
我没有在 div 标签中添加任何白色间隙。
请帮助我。
谢谢。

Answer 1

发生这种情况是因为您将父显示属性设置为 table ，将子显示属性设置为 inline-block 。只需删除 display:inline-block; 你的 div.child 属性，它工作正常。我在下面添加了代码段。

#green{
border:20px solid #3D3;
float:left;
display:block;
}
#orange{
width:100px;
height:100px;
border:10px solid orange;
float:left;
}

.child{
 border:10px solid black;
 /*display:inline-block;*/
 margin:0px;
}
.parent{
  border:10px solid #f00;
  display:table;
  padding:0px;
  margin:0px;
  }

  .clear{
   clear:both;
  }

<div class="parent">
  <div class="child">
   <div id='green'> </div>
   <div id="orange"></div>
   <div class="clear"> </div>
  </div>
 </div>