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

ドロップダウンリスト

本日はヘッダーメニューとかで見られるドロップダウンリストについて。 bootstrapを使った方法は下記に。 http://skill-up-engineering.com/?p=1157 通常のHT …

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

CSSでのtableについて

tableで気を付けたいポイントなど。 Contents1 ボーダー表示2 テーブルの背景色とボーダーのスタイル3 tableのレイアウト3.1 table-layout auto3.2 table- …

no image

laravel Mix

Contents1 laravel Mix2 インストール laravel Mix 実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。 ※保存されると自動的に …

no image

キャッチ画像の扱いについて

今さらながらですが、サイトのトップなどに貼り付けるメインビジュアル系の画像の処置について。 スマホサイトオンリーだとあまり考えなくてもいいかもしれませんが、PCやレスポンシブの場合、ブラウザの幅が伸縮 …