网站开发进阶(四十二)巧用clear:both
来源:互联网 发布:php java 比较 编辑:程序博客网 时间:2024/06/07 16:02
网站开发进阶(四十二)巧用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
- 巧用clear:both
- 巧用clear:both
- 巧用clear:both
- 巧用clear:both
- 巧用clear:both
- clear:both
- clear:both
- clear both
- 小程序开发中clear:both对float的作用
- CSS 的 clear:both;
- Clear both 的妙用
- clear:both的认知
- css中clear:both
- clear:both的理解
- clear:both的理解
- clear:both 属性讲解
- clear:both的理解
- 今天新开通博客
- HDU 1024 Max Sum Plus Plus
- php使用Mailer实现发送邮件
- android——ToggleButton按钮
- python多线程(2)--thread和threading模块的使用
- 网站开发进阶(四十二)巧用clear:both
- Add Digits
- 第一天 Add Two Numbers(链表加法)
- 北漂-代码大神成长的第一天
- XZ_iOS之打开QQ临时会话列表和拨打电话
- 【codevs1298】凸包周长,计算几何
- UIStatusBar 屏幕顶部用于显示网络、时间和电量等的、高度为20点的控件
- ZIP文件格式组成
- 带你走进Android微信支付和支付宝支付服务端操作放到客户端的故事