Quantcast
Channel: Web制作 ウェブマジック »背景指定
Viewing all articles
Browse latest Browse all 5

clearfix:floatの解除

0
0

親ボックス内でfloatを解除する子ボックス[#footer{clear:both;}など]を設けない場合のfloat解除方法。

親ボックス内でfloatを解除しなかった場合、背景画像が表示されない、或いは親ボックスの下まで表示されない場合などに有効だが、基本的には親ボックス内でfloatを解除した方がbetter。

<div id="box">
<div id="box-a"></div>
<div id="box-b"></div>
</div>
---- CSS ----
#box { width: 700px; margin: 0 auto; background: #******; }
#box-a { width: 500px; float: left; }
#box-b { width: 200px; float: right; }
<div id="box" class="clearfix">
<div id="box-a"></div>
<div id="box-b"></div>
</div>
---- CSS ----
#box { width: 700px; margin: 0 auto; background: #******; }

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

 .clearfix { display: inline-block; } /* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
 .clearfix { display: block; } /* End hide from IE-mac */

#box-a { width: 500px; float: left; }
#box-b { width: 200px; float: right; }

参考:Clearing a float container without source markup

和訳:構造のマークアップなしでフロートをクリアする方法

とても参考になる記事:clearfixの決定版を作る -モダンブラウザ編-


Viewing all articles
Browse latest Browse all 5

Latest Images

Trending Articles





Latest Images