css float清理clear方法

问题: 当一个容器内包含使用了float属性的元素时, float元素高度高于容器其他元素时会超过容器界限, 容器不会扩展来包裹float元素, 这将对界面布局造成影响, 例如

 1 <!DOCTYPE html PUBLIC  >
 2  <html>
 3    <head> 
 4    <title>float</title>
 5    <style>
 6 
 7    #wrapper {
 8     background: #EEEDD9;
 9     border: 1px solid black;
10    }
11    #sidebar {
12     height: 200px;
13     float: left;
14     width: 40px;
15     border: 1px solid red;
16    }
17    #content {
18     background: #3399FF;
19     border: 1px solid black;
20    }
21    </style>
22 
23 
24    </head>
25 <body>
26 
27   <div id="wrapper">
28     <div id="sidebar">我是一个浮动元素
29     </div>
30     <p>这里是普通流中的元素</p>
31   </div>
32   
33   <p id="content">上面#wrapper不能包裹float的#sidebar, 占了我的地盘</p>
34 
35  </body>
36  </html>

在firefox下显示为:

解决办法:

在容器最底部放置一个空<div>, <p> 等高度为0的元素, 为其设置clear样式,

<!DOCTYPE html PUBLIC  >
 <html>
   <head> 
   <title>float</title>
   <style>

   #wrapper {
    background: #EEEDD9;
    border: 1px solid black;
   }
   #sidebar {
    height: 200px;
    float: left;
    width: 40px;
    border: 1px solid red;
   }
   #content {
    background: #3399FF;
    border: 1px solid black;
   }
   .clear {
    clear: left;
   }
   </style>


   </head>
<body>

  <div id="wrapper">
    <div id="sidebar">我是一个浮动元素
    </div>
    <p>这里是普通流中的元素</p>
    <div class="clear"></div> <!-- 设置了清理元素 -->
  </div>
  
  <p id="content">井水不犯河水</p>

 </body>
 </html>

显示正常如下:

个人认为这样做简单粗暴有效, 将问题解决在局部, 简单方便, 理论上的缺陷是添加了多余的标签, 这似乎有点学院派吹毛求疵了, 适当添加标签用于布局太普遍了

给容器设置float样式也可以达到这个效果, 但是这会使容器也浮动, 相当于把问题转移了, 后续总得有一个元素进行必要的清理, 有人把所有元素浮动了. 然后使用footer进行清理. 这样应该说让布局更难了, 如果容器没有设置高度(以前依赖于它的contain block), 现在宽度还得受内部元素影响, 如果你遇到了ie6之类的浏览器, 那简直就是灾难

 1 <!DOCTYPE html PUBLIC  >
 2  <html>
 3    <head> 
 4    <title>float</title>
 5    <style>
 6 
 7    #wrapper {
 8     background: #EEEDD9;
 9     border: 1px solid black;
10     float: left;
11    }
12    #sidebar {
13     height: 200px;
14     float: left;
15     width: 40px;
16     border: 1px solid red;
17    }
18    #content {
19     background: #3399FF;
20     border: 1px solid black;
21    }
22    </style>
23 
24 
25    </head>
26 <body>
27 
28   <div id="wrapper">
29     <div id="sidebar">我是一个浮动元素
30     </div>
31     <p>这里是普通流中的元素,#wrapper没有设置宽度, 宽度受影响</p>
32   </div> <!-- 我也浮动, 而且还得设置宽度 -->
33   
34   <p id="content">城门失火殃及池鱼, 我不使用</p>
35 
36  </body>
37  </html>
38

显示如图:

给容器设置属性： overflow:hidden, 这个方法书上说会对容器内position为absolute的元素产生影响，我没有试过具体什么影响，

最好的方法来了：

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