html - Margin-Top は div 要素には適用されません

Question

そこで、シンプルなレイアウトを試してみました。基本的に写真多めのインタビュー形式です。

これが私がフォローしている基本的な概念です。

-イントロ

-写真

-インタビュー

にマージントップを設定して<div id="interview">いますが、機能しません。なぜですか? レイアウトの構造に問題があると思います（クロムで要素の検査をクリックした場合）

それを修正する方法は？リンク: http://mysecretathens.gr/kulte_test/osterman.html

Answer 1

これは、フローティング要素をクリアしていないためです。<div id="interview">このように宣言して使用する前に、フロートをクリアするだけですmargin-top: /* Whatever px */

<div style="clear: both;"></div>
<div id="interview"> 

そしてあなたのウェブサイトを見ると、ランディングページに重い画像を使用しているため、帯域幅が不足しているユーザーを悩ませています。lazy loading

Answer 2

これを修正するクリーンな方法は、photos 要素に「overflow: hidden」を追加することです。

#photos {overflow:hidden;}

Answer 3

上記のすべての画像がフローティングされているため、「機能しません」。そのため、親要素の高さにまたがりません。

div に追加overflow:hiddenして、#photosすべての画像が含まれ、それらが浮き上がらないようにします。これにより、次の要素のマージントップが期待どおりに機能します。