Css关于浮动div的父级

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，子显示属性设置为内联块。只需删除 div.child 的 display：inline-block; 属性，它就可以了。我添加了下面的代码段。

#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>

Answer 2

战斗内联块元素之间的空间，获得空格的原因是因为，元素之间有空格（换行符和几个选项卡计为空格，只是为了清楚）。最小化HTML将解决此问题，您只需修复此pair<numeric_limits<int>::max(), 0>属性， 检查参考站点https://css-tricks.com/fighting-the-space-between-inline-block-elements/

font-size:0

请参阅附件摘录

.parent {
  font-size:0;
}

#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;
    font-size:0;
}
.clear {
	clear: both;
}