Web前端面试指导(十九):CSS样式-如何清除元素浮动?
时间:2023-09-06 19:12:02 | 来源:网站运营
时间:2023-09-06 19:12:02 来源:网站运营
Web前端面试指导(十九):CSS样式-如何清除元素浮动?:题目点评
本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的。
答题思路可以先回答在工作上常用的清除方法,并说明为什么使用它,然后在讲一些其它的清除方法来说明你的思维广阔,知识丰富的一面。 浮动的方式有以下
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;