<div>Les divs refusent d'agir en tant qu'éléments de bloc</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;

J'ai 2 divs à l'intérieur d'un div qui refusent de se comporter comme des éléments de bloc. Pour une raison quelconque, ils sont affichés en ligne, pas en dessous les uns des autres. Pourriez-vous expliquer quelle en est la cause, non seulement comment la résoudre ? Le grand div a une largeur et une hauteur définies. Les petits divs ont également leurs dimensions définies. display:block est utilisé sur les 3 divs. J'ai essayé d'utiliser float, cela n'a pas fonctionné. J'ai essayé d'utiliser clear en même temps que float, cela n'a pas fonctionné. La seule chose qui fonctionne mais très mal, c'est de donner à chacun une position:relative.

Vous n'avez pas besoin de me fournir de code, veuillez simplement essayer d'expliquer pourquoi cela se produit, quel est le problème général, et comment le résoudre, car pour moi, en tant que débutant, il n'a aucun sens qu'ils s'affichent parfois en dessous les uns des autres, parfois à côté les uns des autres.

Answer 1

C'est parce que vous utilisez flex sur le parent - par défaut, les enfants d'un parent flex s'alignent les uns à côté des autres, supprimez le flex et ça fonctionnera.

Je dirais également que comme vos enfants font 100% de largeur, il n'y a pas besoin de flottement, vous pouvez donc aussi le supprimer

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

Plus d'informations sur flexbox

Terrain de jeu Flexbox (codepen)