css - 親子のCSSエラー

Question

私は自分の構造に 2 つのセクションを作成しようとしました。1 つはトップセクションで、もう 1 つはボディセクションです。

本体の div をトップセクションから分離しようとしています。何らかの理由で、本体の div に紫の色を追加すると、他のすべてが着色されます。

私はラッパーに追加overflow:hiddenし、それは何かをしました。私は正しい道を進んでいますか?

ここで私の例を見ることができます。

score 0 · Accepted Answer

それは、フローティング要素を使用し、その後クリアしなかったためです。追加

.mainbody{clear:both;}

しかし、なぜあなたは持っているの.topsection{float:left;}ですか？の場合、何mainbodyもwidth: 100%しません。

overflow:hiddenブロック要素の前にいくつかのフローティング要素があり、彼に見えるものとは異なるものを設定するとoverflow、列が作成されるため、いくつか考えてみました。それで、mainbody下ではありませんでしたtopsection。

編集：

ナンセンスを削除しても、フローティング要素もクリアされない.topsection{float:left;}ためtopright、機能しません。topleftしたがって、追加する.mainbody{clear:both;}か、次のように変更する必要がありますtopsection。

<div class="topsection">
  <div class="topright">...</div>
  <div class="topleft">...</div>
  <div class="clear"></div>
</div>

その後

.clear{clear:both;}

1 に答える 1