div標籤清除float浮動樣式方法

這個方法來源於positioniseverything ，通過after僞類實現，完全兼容當前主流瀏覽器。

 1 <style type="text/css">
 2 .clearfix:after {
 3     content: ".";
 4     display: block;
 5     height: 0;
 6     clear: both;
 7     visibility: hidden;
 8 }
 9 .clearfix {display: inline-block;}  /* for IE/Mac */
10 </style>
11 <!-- main stylesheet ends, CC with new stylesheet below... -->
12 <!--[if IE]>
13 <style type="text/css">
14 .clearfix {
15     zoom: 1;            /* triggers hasLayout */
16     display: block;     /* resets display for IE/Win */
17 }
18 /* Only IE can see inside the conditional comment
19 and read this CSS rule. Don't ever use a normal HTML
20 comment inside the CC or it will close prematurely. */
21 </style>
22 <![endif]-->

方法二、

還有一個無敵的清除浮動的樣式，這個是通過獨立的代碼來清除的。

 1 html body div.clear,
 2 html body span.clear
 3 {
 4     background: none;
 5     border: 0;
 6     clear: both;
 7     display: block;
 8     float: none;
 9     font-size: 0;
10     margin: 0;
11     padding: 0;
12     overflow: hidden;
13     visibility: hidden;
14     width: 0;
15     height: 0;
16 }

可以通過在頁面div中添加clear樣式來清除頁面中的浮動。

1 <div class=”clear”>
2 </div> 
3 或
4 <span class=”clear”> 
5 </span>

方法三、

實際項目中常用如下代碼：

1 .clear:after {
2     clear: both;
3     content: " ";
4     display: block;
5     height: 0;
6     overflow: hidden;
7     visibility: hidden;
8 }

使用方法如下：

1 <div class="clear">
2     <div class="title">標題<div>
3     <div class="content">內容</div>
4 </div>