WEBレイアウトでのfloatの解除方法

WEBサイトを構築していると最初にブチ当たるのがfloatの解除方法があげられると思います。

簡単に言うと、下記のようにsidebarのid要素にfloat:leftを指定すると、親要素からはみ出してしまうのを防ぐ方法です。 01

HTMLの記述 CSSの記述

cliearfixでの対処方法

CSSに下記を付け加えてください。 あとはHTMLのcontainerの親要素に下記のようにクラスを付け加えてください。

ただ最近、わたくしだけでしょうか?clearfixを入れ子にした際に、変なマージンができるという現象が起きるので下記の方法に変更しました。

overflow:hiddenでの対処方法

こちらはいたって簡単です。最初のCSSの#container要素に、oveflow:hidden;を書き加えるだけです。

CSSの記述

これで、containerにsidebarとcontentsがすっぽり格納されたはずです。 02

レイアウトで困ってるあなたも是非やってみてくださいね。

  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です