float が効かない

Question

Bootstrap4のcardクラスの中で、floatが効きません。なぜ？？？

再現↓

<div class="card">
  <div style="background: blue; float: left; width: 50px;">
    s
  </div>
  あああああああ
  <div style="background: red; float:left; width: 80px;">
    s
  </div>
</div>

class="card"を消すと、floatが有効になる↓

<div>
  <div style="background: blue; float: left; width: 50px;">
    s
  </div>
  あああああああ
  <div style="background: red; float:left; width: 80px;">
    s
  </div>
</div>

Answer 1

.card に display: flex; が付いているんからです。
.card に flex-direction: row; をつければ横並びにはなりますよ。

Comments

[komachi]

すばやい回答をありがとうございます！！！！！助かりました