html - 右にフロート、左のコンテンツを下にプッシュ

Question

SVG を右に浮かせています。これらを最上位のオブジェクトにして、残りのコンテンツを押し下げたいと思います。ヘッダーと段落は、中央のメニューの下にプッシュする必要があります。どうすればこれを達成できるか教えてください。私はこれらすべてに慣れていません。

html では、メニューと SVG が最初に来ます。CSS を適用した後は、これは当てはまりません。私はSVGを右に浮かせているので、ヘッダー/段落が何らかの理由で主張しているSVGの左側のスペースを解放しているようです。私の頭の中でそれをさらに奇妙にしているのは、メニューもバイパスすることです。

段落とヘッダーの両方で clear:th を使用する必要はありません。他にも有益なコメントをいただければ幸いです。ありがとう！

以下にどのコードを含めるかわかりません...フィドルはおそらくもっと便利です。 http://jsfiddle.net/akLQk/2/

svg {
float:right;
}

Answer 1

すべての svg コンテンツの後にこれを追加してみてください:

<div style="clear:both"></div>

他のすべてのコンテンツを押し下げます。それが役に立てば幸い ：）

Answer 2

SVGメニューとnavメニューをdivでラップしてから、CSSで次のようにすることもできます。

yourDivWrapper { overflow: auto; }

私はここでそうしました：http：//jsfiddle.net/joelisadev/StPky/