skillup

技術ブログ

デザイン

CSS floatについて

投稿日:

以前もちょっと書きましたが、CSSのfloatについて。

http://skill-up-engineering.com/?p=1708への追記

  • 親から見るとfloatした子供は存在しない状態
  • floatを指定したとしても、回り込ませると親要素の範囲を超えてしまうような場合は、回り込みが起きず、floatした要素の下に落ちてしまう。
  • 通常のブロック要素はwidthを指定していないと幅いっぱいに広がる。レイアウトが文字数に依存してしまう。
  • floatは通常の配置から外れるため、子要素をfloatさせた場合、親の高さ<子の高さになる可能性がある。この場合、内包している最後の要素にclearプロパティを使用しなければいけないが、存在しないことも考え、親要素に疑似のafterを使用することが多い。

参考文献

プロとして恥ずかしくない新CSSデザインの大原則

p82~P87

-デザイン
-,

執筆者:


comment

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

関連記事

no image

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

スマホサイト対策全般

スマホ対策のデザインに関するチェックリスト。 Contents1 viewport2 横のはみ出しチェック3 メディアクエリ viewport まずは横幅などがおかしくないかの確認 [crayon-5 …

no image

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …

no image

CSSのブロックとインライン、レイアウトについて

今回はCSSを組む時のブロックレベルとインラインの基本とレイアウトに関して。 Contents1 ブロックレベルとインライン1.1 ブロックレベル要素1.2 インライン要素1.2.1 参考リンク2 レ …

no image

vertical-alignの挙動に関して

cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。 css中央ぞろえ ざっとまとめると以下のようなかんじでしょうか。 テキストのみの1行タイプであればli …