float とは

「float」は CSS で指定する回りこみの方法です。要素に「float:left;」と記載するとこの要素は左側になり、次の要素が右側に回りこみます。このように、CSSの「float」を利用すると、簡単に HTLM のレイアウトをおこなえます。

float のサンプルリスト

「float」を確認するための HTML サンプルリストの抜粋は、次の通りです。
<div class="contents">の要素の中に、右に表示したい<div class="main">と左に表示したい<div class="side">を配置してあります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
.
<link rel="stylesheet" href="../dsgn/float.css" type="text/css"d>
.
</head>
<body>
<div class="contents">
<h1>デジットさんの画像 極楽湯(立ち寄り湯)</h1>
.
.
<div class="main">
<h3>「極楽湯」の写真</h3>
.
.
</div>
<div class="side">
<h2>立ち寄り湯の写真</h2>
.
.
</div>
</div>
</body>
</html>

使用するスタイルシートは、「float.css」です。「float」を使った、基本的な書き方は次の通りです。

body { margin:0px;
padding:0px;
background-color:#faffff; /* contentsの外の背景色(薄い水色) */
color:#333333;
text-align:center;
}
.contents {
width:750px;
margin:auto;
background-color:#fffefd;/* contentsの背景色(ほぼ白) */
border:solid 1px #cccccc; /* contentsの外枠ライン */
text-align:left;/
position:relative;
}
.main {
width:550px;
margin-top:17px; /*H1とのスペース*/
padding-right:10px;
float:right;
}
.side {
width:182px;
margin-top:16px; /*H1とナビのスペース*/
padding:0px;
border-right:solid 1px #cccccc; /* グレーライン */
float:left;
}

Mozilla Firefoxでは背景がなくなる

IE では、上記 CSS のリストでちゃんと表示されます。 背景がなくなって表示されたページ Mozilla Firefoxでは左図のように背景がなくなってしまうことがあります。この例では、<div class="main">の前に書かれた<h1>までしか、背景がかかっていません。ちょっと解りづらいですが、contents の 外枠ラインもなくなっています。これは、Firefoxのバグではなく、Firefox が CSS を正しく認識している結果のようです。
詳しくは、CSSでfloatを指定したボックスを含むボックスの背景が出なくなるというページに対策が詳しく書かれています。Firefoxだけでなく、最近のブラウザには全て対応できています。結果を利用させていただくと、「contents」の定義に次のリストを書き加えれば、対策出来ます。

/* floatを指定したボックスを含むボックスの背景が出なくなる対策 */
.contents {
overflow: hidden;
}
.contents:after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}
/*\*/
* html .contents {
height: 1em;
overflow: visible;
}
/**/
/* float対策ここまで */

上記対策をした後の完成ページは、下図の通りです。ちゃんと、背景が表示されました。 背景が指定通り表示されたページ

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

ロリポップ! レンタルサーバーは、高機能なのに236円/月~
月額125円からの「さくらのレンタルサーバ
レンタルサーバー

スポンサード リンク

このページは 

トップページ > CSS > float 対策