float要素の高さに合わせて親要素の高さを設定したい

Question

###実現したいこと
float要素を感知し、要素に合わせ高さを設定したいです
以下のようにfloatしたinner要素を囲うwrapですが、inner要素の高さに合わせたいです。
ですが、この状態ですと、wrapの高さは100pxにしかなりません。

<div class="wrap">
  <div class="inner">インナーブロック</div>
  <div class="inner">インナーブロック</div>
</div>

.wrap{
  min-width: 100px;
  background-color: #ddd;
  border: 1px solid #333;
}
.inner{
  float: left;
  width: 200px;
  height:200px;
}

Answer 1

.wrap {
  min-width: 100px;
  background-color: #ddd;
  border: 1px solid #333;
  display: flow-root; /* ADD */
}

【<display-inside> - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/display-inside#Example

---

flex を使うほうが良いとは思います。

【これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス】
https://www.webcreatorbox.com/tech/flexbox/

【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

Comments

[yambejp]

私もflex推し

[tomtom1]

ありがとうございます！floatをやめてdisplay: flex;で解決しました！

Answer 2

float による横ならべはやめて、Flexboxで横ならべしましょう。

.wrap{
  min-width: 100px;
  background-color: #ddd;
  border: 1px solid #333;
  display: flex;
}
.inner{
  width: 200px;
  height:200px;
}

Comments

[tomtom1]

ありがとうございます！無事解決しました！

Answer 3

こんにちは。

ブロック整形コンテキストを持てばよいので、たとえば以下のようにすると解決します。

.wrap{
  display: flow-root;
}

その他、overflow: autoなどでもいいと思います。

参考：
ブロック整形コンテキスト - 開発者ガイド | MDN

---

古典的には、clearfixなどが使われてきましたが、現状のCSSではあまり使う意味はないと思います。

Comments

[tomtom1]

ありがとうございます！floatをやめてdisplay: flex;で解決しました！

Answer 4

overflow:hiddenを使ってfloatを解除してください。

.wrap{
  overflow:hidden;
}

Comments

[tomtom1]

ありがとうございます！floatをやめてdisplay: flex;で解決しました！

Answer 5

float処理はレイアウトしづらいのであまりおすすめはできないですけどね
.wrapにoverflow:hidden; を指定すればとりあえず高さを保持できます

Comments

[tomtom1]

ありがとうございます！floatをやめてdisplay: flex;で解決しました！