BinaryDevelop
  1. ホーム
  2. css

margin-top が clear: both と共に動作しない

2023-09-20 22:58:33

質問 

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

なぜ margin:top が機能していないのはなぜですか？

どのように解決するのですか？

2つのフロートされたdivを 別の に入れることができます。 

<div style='overflow:hidden'>
  <div style="float: left;">Left</div>
  <div style="float: right;">Right</div>
</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

編集

- この5年前の回答に少し補足します。混乱した動作の原因は、やや複雑な処理である マージンの折りたたみ . OPの元のHTMLを使った良いトリックは、次のようなCSSルールを追加することです。 

div { border: 1px solid transparent; }

パッと見は これで (私が追加した <div> を追加することなく）うまく動作するようになりました。まあ、ボーダーの余分なピクセルを除けば、ですが。特に、私は と思う という組み合わせです。 clear: both の動作とマージンの折りたたみルールの組み合わせで、OPのコードから予想外のレイアウトになったのだと思います。

再度編集する

- 完全な（そして完全に正確だと思う）ストーリーは、以下を参照してください。 Mark Amery の素晴らしい回答 . 詳細については、この回答では説明しきれない複雑さがあります。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します