Web前端面试指导(十九):CSS样式-如何清除元素浮动?
来源:互联网 发布:桌面软件下载大全 编辑:程序博客网 时间:2024/05/17 22:08
题目点评
本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的。
答题思路
可以先回答在工作上常用的清除方法,并说明为什么使用它,然后在讲一些其它的清除方法来说明你的思维广阔,知识丰富的一面。 浮动的方式有以下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;
- Web前端面试指导(十九):CSS样式-如何清除元素浮动?
- Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?
- CSS样式-清除元素浮动
- Web前端面试指导(十六):为什么要初始化CSS样式?
- 【Web前端】清除浮动&css中文字体
- Web前端面试指导(二十九):Ajax 是什么? 如何创建一个Ajax?
- web前端面试常见问题三------浮动原理和清除浮动
- Web前端面试指导(十三):css样式的优先级是怎么样的?
- Web前端面试指导(十五):CSS样式-display有哪些作用?
- Web前端面试指导(五十):CSS样式书写有哪些规范?
- [CSS]clearfix 清除浮动元素及去掉浏览器默认样式
- 前端面试必问清单-----CSS清除浮动
- Web前端面试指导(二十一):如何向数组中间插入或删除元素?
- Web前端面试指导(十一):样式导入有哪些方式?
- web前端清除浮动详解
- Web前端面试指导(十):元素定位有哪些?
- Web前端面试指导(完结)
- css的浮动以及如何清除浮动
- Spark的几个基本概念:Driver和Job,Stage
- 使用VS的生成事件命令行指令将生成的exe,dll文件复制到指定文件夹中
- 正则表达式test(),慎用g
- 关于appium启动报错问题的解决办法
- iOS 友盟集成教程
- Web前端面试指导(十九):CSS样式-如何清除元素浮动?
- 100亿个整数,内存足够,如何找到中位数?内存不足,如何找到中位数?
- Python爬虫Scrapy实践
- 给定两个整形变量的值,将两个值的内容进行交换
- Quartz-job的quartz.properties配置文件说明
- Android事件分发原理全面解析
- 杭电 2024 C语言合法标识符
- CocoaPods--常见错误
- protobuf 3.0.0 协议头简单说明