[CSS]floatを解除した要素を一番下に入れてfloatを解除&cleafix

最近構築したブログで、
写真の下に、記事下のラインが回り込んでしまって困っていたのですが、
このページの2項目め「floatを解除した要素を一番下に入れる」で解決しました。

clearfixでfloatを解除 | d-spica

ほんとはclearfixを使った方がいいのかな。
clearfixという手法は概要はわかってはいるのだが、
自分はいつも善意で配布されているテンプレートなどを使うことが多いので、
既にそれに予め設定されていることが多く、自分で設定することがないので、
イチから作る場合は、モノ(知識)になってないなぁと実感します。
いつもfloatとclear要素で迷うなぁ。精進します。

■xhmlの記述

content

■CSSの記述

.clearfix:after {
content: ".";  /* 新しい要素を作る */
display: block;  /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

未分類

Posted by ponnao