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のレイアウト例 その4 グリッドレイアウト

本日はグリッドレイアウトについて。 このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗) サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザイン …

no image

sassについて

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。 Contents1 sassとは2 インストール&コンパイル3 一般的な記法など4 参考リンク sassとは 一言で …

no image

レスポンシブサイト作成に関して

実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。 メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなると …

no image

css animationの使い方、他スクロース量でのアニメーションなど

transitionとちょっと近いですがCSSでのanimationに関して。 HTML

CSS [crayon-6513298d09 …

no image

デザイ二ングインターフェイスのまとめ

デザイ二ングインターフェイスを今まで読んで実務にすぐ生かせそうな&ポイントとなりそうな箇所のまとめ Contents1 ユーザーを理解する2 ユーザーの行動パターン3 ポジショニング(情報の配置) 4 …

アーカイブ