问题: 当一个容器内包含使用了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 }