题目点评
本题属于比较常问的题目，也是在网页设计中经常遇到的问题，面试官希望通过这样的面试题来了解你对网页设计的基本功底，如果这样的题目答不出来，必会让面试官大失所望，面试成功的概率是非常小的。
答题思路
可以先回答在工作上常用的清除方法，并说明为什么使用它，然后在讲一些其它的清除方法来说明你的思维广阔，知识丰富的一面。 浮动的方式有以下4种。
1.使用clear:both清除浮动
|
示例1：使用div |
|
|
html代码 |
css代码 |
|
<div class="box"> <div class="div"></div> <div class="clear"></div> </div> |
.box{ width:300px;margin:0 auto;border:10px solid #000;} .div{ width:200px;height:200px;background:red;float:left;} .clear{ height:0px;font-size:0;clear:both;overflow: hidden;} |
|
示例2:使用<br clear="all"> |
|
|
<div class="box"> <div class="div"></div> <br clear="all"/> </div> |
.box{ width:300px;margin:0 auto;border:10px solid #000;} .div{ width:200px;height:200px;background:red;float:left;} |
|
示例3：伪类对象::after+zoom:1(推荐使用) |
|
|
<div class="box clear"> <div class="div"></div> </div> |
.box{margin:0 auto;border:10px solid #000;} .div{ width:200px;height:200px;background:red;float:left;} .clear{zoom:1;} .clear:after{display:block;clear:both;content:"";visibility:hidden;height:0} |
2.使用overflow属性
|
html代码 |
css代码 |
|
|
<div class="box"> <div class="div1"></div> </div> |
.box{ width:300px;border:1px solid #000;overflow:auto;} .div1{ width:260px;height:400px;background:Red;float:left;} 注意：overflow:auto;、overflow:hidden;都可以 |
|
3.使用display属性
|
html代码 |
css代码 |
|
|
<div class="box"> <div class="div"></div> </div> |
.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;} .div{ width:200px;height:200px;background:red;float:left;} 注意：父元素不能水平居中，在父元素使用text-align:center解决 |
|
4.父级元素浮动
|
html代码 |
css代码 |
|
|
<div class="box"> <div class="div"></div> </div> |
.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;} .div{ width:200px;height:200px;background:red;float:left;} 注意：父元素不能水平居中，可以使用定位解决 position: relative; left: 50%; margin-left: -150px; |
|