<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>测试浮动</title> <style type="text/css"> .container{ width:200px; background-color:#b6ff00; } .large{ float:left; background-color:#00ffff; } .small{ width:90px; height:90px; float:right; background-color:#ff6a00; } .page{ color:#4800ff; } /*清浮动方法1：紧跟在最后一格子元素后面加上<div class="clear"></div>*/ .clear{ /*clear:both;*/ } /*清浮动方法2：在父容器上定义一个class*/ .over-flow{ overflow:auto; } /*清浮动方法3：在父容器上定义一个class*/ .clearfix:after{ /*content:"."; display:block; height:0; clear:both; visibility:hidden; font-size:0;*/ } </style> </head> <body> <div> <div class="container clearfix over-flow "> <div class="large"> <table class="table1"> <tr> <td>aa</td> <td>bb</td> </tr> <tr> <td>cc</td> <td>dd</td> </tr> </table> </div> <div class="small"> <table class="table2"> <tr> <td>11</td> <td>22</td> </tr> <tr> <td>33</td> <td>44</td> </tr> <tr> <td>55</td> <td>66</td> </tr> </table> </div> <div class="clear"></div> </div> <div class="page"> <p>this is designed for css float test </p> </div> </div> </body> </html>
测试浮动
| aa | bb |
| cc | dd |
| 11 | 22 |
| 33 | 44 |
| 55 | 66 |
this is designed for css float test
最后的<div class="page">,如果它没有浮动样式，不能放在container 中。需要清浮动的父元素中必须都是包含浮动的子元素