div 拒绝充当块元素

Question

.useless {
	float: right;
	clear: right;
	border: 1px dashed blue;
	height: 50px;
	width: 100%;
}
div.pretraga {
	border: 3px groove red;
	width: 20%;
	float: right;
	margin-right: 5%;
	border-top: 0;
	display: flex;
	justify-content: center;
	height: 250px;

<div class="pretraga">
  <div class="useless">
  </div>
  <div class="useless">
  </div>
</div>

我在一个 div 中有 2 个 div 拒绝充当块元素。出于某种原因，它们是内嵌显示的，而不是彼此下方。你能解释一下这是什么原因，而不仅仅是如何解决它？ 较大的 div 设置了宽度和高度。 较小的 div 也设置了它们的尺寸。 Display:block 用于所有 3 个 div。 我尝试使用浮动，没有工作。 我尝试将 clear 与 float 一起使用，但没有奏效。 唯一有效但非常糟糕的是，给他们每个人的位置：相对。

你不需要给我提供代码，请试着解释一下为什么会这样，一般问题是什么，你是怎么解决的，因为对我来说，作为一个初学者，这没有意义它们有时在下方显示，有时并排显示。

Answer 1

这是因为您在父级上使用了 flex - flex 父级的子级的默认设置是彼此相邻对齐，移除 flex 即可。

我还要说，由于您的孩子是 100% 宽度，因此不需要浮动，因此您也可以将其移除

.useless {
  border: 1px dashed blue;
  height: 50px;
  width: 100%;
}

div.pretraga {
  border: 3px groove red;
  width: 20%;
  float: right;
  margin-right: 5%;
  border-top: 0;
  justify-content: center;
  height: 250px;
}

<div class="pretraga">
  <div class="useless">
  </div>
  <div class="useless">
  </div>
</div>

More information about flexbox

Flexbox playground (codepen)