概要ページでのフロートとクリアフロート

 <画像ソース="" />
<p>テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ</p>

  P {余白: 0; 境界線: 実線 1px;}
  画像 {float: 左;}

  P {余白: 0; 境界線: 実線 1px; 幅: 200px; フロート: 左;}
  画像 {float: 左;}

 <セクション>
<画像ソース=" />
<p>これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。</p>
</セクション>
<footer>これが底です。これが底です。これが底です。これが底です。これが底です。これが底です。これが底です。これが底です。</footer>

セクション、フッター {border: solid 1px;}
画像 {float: 左;}

  セクション {border: solid 1px; float: left; width:100%}
  フッター {border: solid 1px; clear: left}
  画像 {float: 左;}

.clearfix:後{
  コンテンツ： "";
  表示: ブロック;
  高さ: 0
  可視性: 非表示;
  クリア：両方
}

 <セクション>
  <画像ソース=" />
  <p class="clearfix">テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ</p>
  <画像ソース=" />
  <p class="clearfix">テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ</p>
  <画像ソース=" />
  <p class="clearfix">テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ</p>
</セクション>

.clearfix:後{
  コンテンツ： "";
  表示: ブロック;
  高さ: 0
   可視性: 非表示;
  クリア：両方
}