CSS样式中ClearBoth的理解

在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both;

CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。

比如:

这个是第1列,

这个是第2列,

这个是第3列。

如果不用清除浮动,那么第3列文字就会和第1、2列文字在一起 ,所以我们在第3个这列加一个清除浮动 clear:both;

这个是第1列,

这个是第2列,

这个是第3列。

通常,我们往往会将“清除浮动”单独定义一个CSS样式,如:

.clear {

clear: both;

}

然后使用

来专门进行“清除浮动”。

不过也有不赞同意见是,可以不写,直接在下层清除就可以了。

比如本来好好的

非要整成

这点看来,确实不需要写。

不过很显然,我们在网页设计时还有一种很普遍的情况:

#sidebar { float: left;width: 130px;}

#container {float: right;width: 420px;background-color: #FFFF33;}

第一段内容 第一段内容第一段内容

第二段内容 第二段内容第二段内容

第三段内容

该页面测试在IE下效果正合所要:蓝色块内部有红色和黄色两个色块内容,同时在蓝色块以下是第三段文本。

不过FF的效果可不是这样的。我们不能单单想在下一层清除就能完成我们的工作,我们必须在浮动元素所在标签闭合之前及时进行“清除”。

第一段内容 第一段内容第一段内容

第二段内容 第二段内容第二段内容

第三段内容

对于因多加的标签会引起IE和FF高度变化,通过如下方法解决: .clear {

clear: both;

height:1px;

margin-top:-1px;

overflow:hidden;

}

刚学的css+div,一直为这个问题所困扰,写下来备忘。

参考原文:http://www.wendangku.net/doc/968ad3b969dc5022aaea007c.html

时间: 2024-11-06 15:22:54

CSS样式中ClearBoth的理解的相关文章

CSS定位中最难理解的她——absolute的探讨

由于放假,近来无事就随便找点事来玩一下,就学了以后要用到的web开发,看到CSS样式中定位时absolute非常不理解,在网上找了很多解释反而弄得我更困惑了,于是决定自己实验,找出各种关系.关于CSS定位中absolute的特点,我总结起来无非是以下几点: 1.定位position为absolute属性的容器会脱离标准文档流,可以放在整个页面的各个位置(这个当然要与其他属性结合使用): 2.定位的标准为整个页面或者外包裹容器,同级元素不会成为absolute容器的定位标准: 3.当定位为abso

css样式中常见的属性

一 CSS文字属性: color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ v

css样式中position和_position的区别

position:fixed; 相对于浏览器窗口绝对定位._position:absolute; 只有IE6能识别, IE6不支持fixed, 所以针对IE6使用absolute绝对定位, 一般还要配套一个expression脚本来实现 属性expression_r:针对ie6写的 CSS的出现使网页制作者在对网页元素的控制方便许多,当然,有利必有弊,CSS只能对颜色.大小.距离等静态样式有效,对于要实现某些html元素的动态样式就显得有些力不从心. 有了CSS的自定义属性expression_

css样式中position:absolute和position:relative水平居中

首先我们要了解样式中的这两种定位: absolute(绝对定位):将被赋予的对象从文档流中拖出,使用left,right,top,bottom等属性相对于最接近的一个最有定位设置的父级对象进行绝对定位,如果父级没有进行定位属性设置,则按照默认规则来设定(根据body左上角作为参考进行定位),同时绝对定位的对象可层叠. relative(相对定位):对象不可重叠,使用left,right,top,bottom等属性在正常的文档流中进行定位,其对象不可以层叠. 居中: 1,对于使用了absolute

css样式中如何设置中文字体?

代码如下: .selector{ font-family: SimHei,"微软雅黑",sans-serif; } 注意:加上中文名“微软雅黑”是为了兼容opera浏览器,中文字体名必须加上引号(单引号双引号都可以). MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLiu记得11px下的中文有着不凡的效果. 在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名: 华文细黑:STHeiti Light [STXihei] 华文黑体:STH

CSS样式中visited,hover,active , focus这四个分别表示什么意思?

CSS伪类用于向某些选择器添加特殊的效果.CSS又名层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺序可以随便放置. :focus,: hover,:active这几个,如果你设置的顺序不同,会直接影响样式的显示效果. :focus -> :hover -> :active 有些人可能会困惑,为什么必须要按这样的顺序,而不能打乱呢? 其实他们每一个选择器都代表一个含义. :link代表为访问链接

css样式中的空格

1.css中的空格 2. jQuery的空格则表示:下一级 .filter这个样式的下一级标签li,li的下一级标签a(jQuery很强大,样式下的标签都能拿到,i 服了 you) 原文地址:https://www.cnblogs.com/Each-Person-Got-a-Dream/p/8949639.html

CSS样式中常用的字体名称

css中引入字体: @font-face { font-family: "AncientWar"; src: url('style/css/fonts/AncientWar.ttf'); } 常用的CSS字体名称 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi

CSS样式中字体和大小

1.css中引入外部字体文件: @font-face 被列为了 CSS3 的一项新特性,其实它并不是什么新鲜技术,它最早出现在 CSS2 的规范定义中,但是在 CSS2.1 中又被删除,现在被正式列入 CSS3.目前主流的浏览器(IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+)都能够支持这个属性,所以不用担心会有浏览器兼容性问题. @font-face 允许您在网页中使用电脑中没有安装的字体,完全摆脱安全字体的限制.只需将字体包安装在服务器上