読者です 読者をやめる 読者になる 読者になる

どうみても備忘録

仕事の備忘録だよ。勉強になった記事をオンラインブックマーク&ストックしているよ。

cssを効かせたい箇所指定するときのあれこれ

・この列の最初や最後だけマージン消したいとか線消したいとかそういう設定のときにつかうあれこれ

 

qiita.com

floatで高さを認識させるとき

・floatを使った要素の親要素は、height:auto;(デフォルト) では高さが0になる。

 

解決方法

  1.  親要素にoverflow:hidden; または overflow:auto;を使う
  2. floatした要素の直後の要素にclear:both;をつける
  3. clearfixを使う

 

/* Clearfix---- */
.clearfix:after {
clear: both;
content:".";
display:block;
height:0;
visibility:hidden;
}
.clearfix { display:inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
/* End hide from IE-mac */

----------------------------------------

 

仕事ではclearfixを使ったものをよく見るけど、classがバンバン増えていくと見づらいので、ものによってはスマートに見せたい時はoverflow:hidden;とかclear:both;でいいのかもしれない?

 

 

★参考元

qiita.com