floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
clear:both;を忘れずに－ブログ・テンプレート作成入門
MovableTypeのオリジナル・テンプレート作成を０から図解式で解説します。 ブログ・テンプレート作成入門 ＞ ２カラムレイアウト ＞ clear:both;を忘れずに ＜＜ 前のページ メインページのテンプレートの修正と画面確認 前回サイドバーを設置し、ブラウザで画面を確認したところ、フッタ部分が最下部ではなくサイドバーの下に表示されてしまうという問題が発生しました。 これは、CSSの仕様であり、floatプロパティで指定したグループの次のグループは、回りこんで表示されるという仕組みになっているからです。 この回り込みを無くすために、スタイルシートのフッタグループ（footer）に次の1行(clear:both;)を追記します。回り込みをクリアしますという命令です。（厳密な仕様は違います。ここでは簡単な説明でおさえます。） ※width指定も追加します。指定しなかった場合、レイアウト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
