网站开发进阶(四十二)巧用clear:both
2016-07-19 20:26
417 查看
网站开发进阶(四十二)巧用clear:both
前言
我们在制作网页中用div+css或者称xhtml+css都会遇到一些很诡异的情况,明明布局正确,但是整个画面却混乱起来了,有时候在IE6下看的很正常的,到ie7或者火狐下看时,就一片混乱了,无论怎么计算,就是不能将排版改正过来。其实,这一切都是浮动搞得鬼,也就是css中的float,要解决情况,就需要使用clear:both了。 CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。 在开发中,从美工MM给你Html代码中,肯定能经常看 <div style="clear:both;"></div>这样的代码,但是你真的能明白它是做什么用的吗?<div style="border:2px solid red;"><div style="float:left;width:80px;height:80px;border:1px solid blue;">
TEST DIV
</div>
<div style="clear:both;"></div>
</div> 你可以将此部分代码放到一个HTML页面看看效果,然后在去掉<div style="clear:both;"></div>看一下效果,就知道这句话的作用了。 如图: (1)有clear:both的:
(2)无clear:both的
这样看,应该就一目了然了:原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。
美文美图
相关文章推荐
- 网站开发进阶(四十二)巧用clear:both
- Codis的架构设计
- 比较好的开发博客和网站(更新中。。。)
- 收藏qt学习的网站
- 微服务架构的分布式事务问题
- 资料网站收集
- web前端-二级分类菜单(类似购物网站)
- 网站的PV UV IP---网站常见软件性能
- 用Meta标签控制360浏览器默认极速模式打开自己的网站
- ROS学习之 roscpp内部架构概况
- solar常用网站
- 网站建设-PHPWAMP 学习笔记
- MySQL高可用方案-PXC环境部署记录
- NUMA架构的CPU -- 你真的用好了么?
- 搭建开发框架Express,实现Web网站登录验证
- 架构实践
- Android Sensor传感器系统架构初探
- 通过浏览器下载放在win7 IIS网站下的apk
- 谈谈MVC模式
- 贝叶斯分类数据集的网站