CSS3 クリアフロートメソッドの例

// HTML コード <セクション>
    <div class="origin1">
      ![画像](http://upload-images.jianshu.io/upload_images/2944582-8c9f0eba7dce2e55.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      <span>私が大きなテキストだと想像してください</span>
    </div>
    <div class="float1">
      ![画像](http://upload-images.jianshu.io/upload_images/2944582-8c9f0eba7dce2e55.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      <span>私が大きなテキストだと想像してください</span>      
    </div>
  </セクション>

// css code.origin1 span {
  表示: ブロック;
  幅: 250ピクセル;
  高さ: 120px;
  背景色: #78f182;  
}

.float1 画像{
  フロート: 左;
}

.float1 スパン {
  表示: ブロック;
  幅: 250ピクセル;
  高さ: 120px;
  背景色: #78f182;
}

// HTML コード <section class="section2">
    <ul>
      <li><a href="#">製品センター</a></li>
      <li><a href="#">サービスセンター</a></li>
      <li><a href="#">ニュースセンター</a></li>
      <li><a href="#">お客様の声</a></li>
      <li><a href="#">採用</a></li>
    </ul>
  </セクション>

//cssコード.section2 li{
  リストスタイル: なし;
  フロート: 左;
  パディング: 20px;
  高さ: 20px;
  背景色: #1249c3;
  右境界線: 1px 実線 #a0a2a2;
}

.section2 li a {
  色: #fff;
}

// HTML コード <ul>
      <li><p>インタラクティブ セクションli</p></li>
      <li><p>学習セクション</p></li>
      <li><p>メッセージボード</p></li>
      私は3つのセクションの外側にラップされるべき親要素ulです
    </ul>

    <div class="new">私はulに続く新しいdivです</div>

//cssコードul{
  パディング: 20px;
  背景色: #b7db05;
}

ul li {
  幅: 200ピクセル;
  高さ: 200px;
  背景色: #e3e3e3;
  右マージン: 20px;
  テキスト配置: 中央;
  フロート: 左;
}

。新しい {
  高さ: 50px;
  背景色: #1be751;
}

// HTML コード <ul>
      <li><p>インタラクティブ セクションli</p></li>
      <li><p>学習セクション</p></li>
      <li><p>メッセージボード</p></li>
      私は3つのセクションの外側にラップされるべき親要素ulです
      <div style="clear:both;"></div> // コードを追加</ul>

    <div class="new">私はulに続く新しいdivです</div> 

//cssコードul{
  パディング: 20px;
  背景色: #e7a5b8;
  オーバーフロー: 非表示;
} 

// css コード ul:after {
  コンテンツ： "";
  クリア: 両方;
  表示: ブロック;
}