チョコパイを240こ食べたプログラマ

青森から大都会に出てきてPHPエンジニアとして修行中。CSSとかも。時々趣味の雑貨系も♡好物は『チョコパイ』。好きな関数は『var_dump』。Twitterは@chooringo(ちょうりんご)

CSSの基礎:いつも壁にぶち当たるfloatと解除方法

回り込み指定するfloatプロパティと、それを解除するclearプロパティについてのメモ!
こういうのもついつい忘れてしまうので;;

  • floatプロパティはどの要素にも適用される
  • clearプロパティはブロック要素のみ適用される

float解除その1

floatを解除するには、回り込ませたくない要素の前のブロック要素にclearを指定する

float解除その2

または、空の要素を作ってそれを解除専用にしてclear指定する

.chocopai(回り込み解除したい要素の前要素):after{
    contents: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


★参考にしたもの★
http://www.tagindex.com/template/menu/hor1_menu.html
http://www.tagindex.com/stylesheet/properties/float.html
http://www.tagindex.com/stylesheet/box/clear.html