css清除浮动“clear:both;”的应用
作者:cnbruce 来源:cnbruce博客 发布时间:2008-03-17 12:54:00
标签:clear,float,清除浮动,web标准,css
在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both;
CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。
当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。
比如:
如果不用清除浮动,那么第3列文字就会和第1、2列文字在一起 ,所以我们在第3个这列加一个清除浮动 clear:both;
通常,我们往往会将“清除浮动”单独定义一个CSS样式,如:
.clear {
clear: both;
}
然后使用<div class="clear"></div>来专门进行“清除浮动”。
不过也有不赞同意见是,<div class="clear"></div>可以不写,直接在下层清除就可以了。
比如本来好好的
<p style="float:left;width:200px;">这个是第1列,</p>
<p style="float:left;width:400px;">这个是第2列,</p>
<p style="clear:both;">这个是第3列。</p>
非要整成
<p style="float:left;width:200px;">这个是第1列,</p>
<p style="float:left;width:400px;">这个是第2列,</p>
<div class="clear"></div>
<p>这个是第3列。</p>
这点看来,<div class="clear"></div>确实不需要写。
不过很显然,我们在网页设计时还有一种很普遍的情况:
该页面测试在IE下效果正合所要:蓝色块内部有红色和黄色两个色块内容,同时在蓝色块以下是第三段文本。
不过FF的效果可不是这样的。我们不能单单想在下一层清除就能完成我们的工作,我们必须在浮动元素所在标签闭合之前及时进行“清除”。
对于因多加的<div class="clear"></div>标签会引起IE和FF高度变化,通过如下方法解决:
.clear {
clear: both;
height:1px;
margin-top:-1px;
overflow:hidden;
}


猜你喜欢
- 在SQL语句优化过程中,我们经常会用到hint,现总结一下在SQL优化过程中常见Oracle HINT的用法:1. /*+ALL_ROWS*
- 介绍残差网络是何凯明大神的神作,效果非常好,深度可以达到1000层。但是,其实现起来并没有那末难,在这里以tensorflow作为框架,实现
- url标记为变量通过把 URL 的一部分标记为 <variable_name> 就可以在 URL 中添加变量。标记的 部分会作为
- struts2.3.24 + spring4.1.6 + hibernate4.3.11+ mysql5.5.25开发环境搭建及相关说明。
- 本文介绍用python实现的搜索本地文本文件内容的小程序。从而学习Python I/O方面的知识。代码如下:import os#根据文件扩展
- 我就废话不多说了,直接上代码吧!import Imagefrom datetime import datetimeimport osstr
- 内容摘要:浏览器不兼容这个难题,一直是网页设计师们头痛的事情。ie7.0的面世,尚且不论他是否较之ie6.0进步, ie7和ie6
- 有时候,因为内容的更改或者隐私问题,我们往往不 希望别人通过“百度快照”的方法 查看 自己网站的某一些网页,对于网站管理员来说,百度快照也分
- 1. 如何阻止事件冒泡 //非IE if (event && event.stopPropagation) event.st
- SqlServer 在事务中获得自增ID实例代码在sqlserver 中插入数据时,如何返回自增的主键ID,方式有很多,这里提
- Eric A. Meyer 对基于 Web 标准的 CSS 与 HTML 绝非一知半解,他是这个领域杰出的专家,曾写过不少 CSS 方面的书
- 数据库连接池概念:其实就是一个容器(集合),存放数据库连接的容器。概念:其实就是一个容器(集合),存放数据库连接的容器。 &n
- 1、python-pptx模块简介使用python操作PPT,需要使用的模块就是python-pptx,下面来对该模块做一个简单的介绍。这里
- 一、简介shutil是 python 中的高级文件操作模块,与os模块形成互补的关系,os主要提供了文件或文件夹的新建、删除、查看等方法,还
- 首先说明下范围用Javascript来开发WEB页面的动画效果该思路同时考虑页面效率、SEO,如果数据大,也可以缓解后端压力。这个是程序设计
- Python写倒序输出(任意位数)倒序输出数字这种方法最后输出的是字符而不是数字x=int(input('请输入任意一个数字:
- 先看看结果吧,去bilibili上拿到的图片=-=第一步,导入模块import requestsfrom bs4 import Beauti
- CrawlSpider作用:用于进行全站数据爬取CrawlSpider就是Spider的一个子类如何新建一个基于CrawlSpider的爬虫
- 思考一下下面的代码片段: def foo(numbers=[]): numbers.append(9) p
- 如下所示:<select id="host_list" name="host_list" mu