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下显示为:

 

解决办法:

  1. 在容器最底部放置一个空<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>

    显示正常如下:

    1. 个人认为这样做简单粗暴有效,  将问题解决在局部,  简单方便,   理论上的缺陷是添加了多余的标签,   这似乎有点学院派吹毛求疵了,  适当添加标签用于布局太普遍了
  2. 给容器设置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

    显示如图:   

  3. 给容器设置属性： overflow:hidden, 这个方法书上说会对容器内position为absolute的元素产生影响，我没有试过具体什么影响，
  4. 最好的方法来了： 
    1    .clear:after {
2     content: ".";
3     display: block;
4     clear: both;
5     height: 0;
6     font-size: 0;
7     visibility: hidden;
8    }

     

 

 

 

 

 

 

 

 

 

 

posted @ 2013-11-10 23:22  我的百科全书  阅读(417)  评论(0)  编辑  收藏  举报