【CSS、Chakra-ui】floatを使うと親要素から高さを認識されなくなるの気を付けたい

❓ 問題

以下のようなコードで Button が Box の外にはみ出している、本来であれば【戻るボタン】をボーダー内に設置したい。（コードは省略していますが）

<Box borderWidth="1px">
  ...
  <Button float="left">戻る</Button>
</Box>

🔍 原因

float="left" を指定すると、親の Box がボタンの高さを認識できず、結果としてレイアウトが崩れたり、ボタンがボックスの外に飛び出します。

---

✅ 解決方法

✅ 方法1: Flex を使う（おすすめ）

<Flex justify="flex-start" mt={4}>
  <Button _hover={{ bg: "blue.400" }}>戻る</Button>
</Flex>

• float を使わず Flex で左寄せ。
• 親コンテナとの整合性も取れる。

---

✅ 方法2: overflow="hidden" で高さ崩れを防ぐ

<Box borderWidth="1px" overflow="hidden">
  <Button float="left">戻る</Button>
</Box>

Chakra UIでは float よりも Flex / Stack を使うのが推奨されます。

---

✅ 方法3: 幅を調整して崩れを防ぐ

<Button w="fit-content">戻る</Button>

• レイアウトによっては、ボタン幅の調整でもはみ出しを防げます。

修正結果（自分はFlexを利用しました）

✅ まとめ

方法	安定性	Chakraらしさ	備考
Flexを使う	◎	◎	一番おすすめ
overflow指定	△	△	応急処置的
ボタン幅調整	○	○	シンプルなケース向き

---