CSS09 floatプロパティの苦手克服！要素の回り込みと解除（6分27秒）

今回は、要素の回り込みと解除について解説しています。

受講生さんの中でもこの回り込みと解除についてについては苦手！という方がとても多いです。

それは、この要素の回り込みと解除については、決まりごとが多く、CSSの仕様に左右されたりしてレイアウトが崩れる大きな要因になっているからです。

ここでは、そんな初心者さんにとっての難関、floatプロパティとclearプロパティについて基本的な部分を一つ一つクリアしていく解説をしています。

概要

要素の回り込み（floatプロパティ）
回り込みの解除（clearプロパティ）
floatを設定した要素の高さ

補足・ポイント

要素を回り込みさせる

要素を回り込みさせるには、floatプロパティを使います。

動画の例では、p要素で囲まれている画像に対して、floatプロパティを指定したいので、この画像のp要素にclassセレクタを指定します。

htmlファイルへの記述はこのようになります。

<p class="imgLeft"><img src="sample.jpg"></p>

cssファイルへの記述はこのようになります。

p.imgLeft {
float:left;
}

floatプロパティの値には、leftまたはrightが入ります。

回り込みを解除する

floatは浮いているという意味があります。

そのため、floatプロパティを指定した画像以降の要素が回り込みます。

この回り込みを解除するには、解除したい要素にclearプロパティを設定します。

cssファイルへの記述はこのようになります。

.title {
clear:both;
}

clearプロパティの値には、left、right、bothが入ります。

left: 左の回り込み（float:left;）を解除します。
right: 右の回り込み（float:right;）を解除します。
both: 左右の回り込みを解除します。

clearを指定している要素の上のmarginが効かないケースがあります。

CSSの仕様で、floatを設定した要素の高さ（ここでは画像）の高さを認識しないというルールがあります。

画像自体は見えているけれど、この部分の高さが認識されていないということになりますので、次のclearを指定した要素のマージンが効かないのです。

このケースでは、テキストの量を増やせば、自動的にマージンが反映されます。

この状況を回避するにはいくつかの方法があります。

これについては、また、別の機会に取り上げていきたいと思います。

動画での全体のhtmlソース

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">

<title>港区青山　ビストロ・ドゥ・リヨン</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="header">
<h1>ビストロ・ドゥ・リヨン</h1>
<p>ビストロ・ドゥ・リヨンは港区青山にあるフランス料理です。</p>
</div>
<h2 class="title">本格フレンチの味を気軽に楽しめる ビストロ・ドゥ・リヨン</h2>
<p class="imgLeft"><img src="sample.jpg"></p>
<p>フレンチをもっと楽しく！もっと気軽がコンセプト</p>
<p>フランス料理の伝統的な定番料理を、緑が見える店内でゆっくりとお楽しみください。</p>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<h3 class="title">パーティープランのご案内</h3>
<p>記念日や季節のイベント、同窓会など各種パーティーに対応</p>
<p>和やかな雰囲気で、ステキな時間を。</p>
</body>
</html>

動画での全体のcssソース

@charset "utf-8";
/* CSS Document */
#header {
background-color:#f0f0f0;
padding:30px;
}
#header p {
font-size:12px;
}
.title {
font-size:18px;
color:#484848;
border-left:7px solid #b89e83;
background-color:#fff2e2;
padding:9px 0 7px 10px;
margin-top:45px;
clear:both;
}
p.imgLeft {
float:left;
margin-right:10px;
margin-top:0;
}