文档章节

CSS中clear:both的理解

dhb_oschina
 dhb_oschina
发布于 2013/08/15 20:45
字数 717
阅读 201
收藏 5

在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both;    
CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。    
   
当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。

语法: clear : none | left |right | both

参数:  
none : 允许两边都可以有浮动对象    
both : 不允许有浮动对象    
left : 不允许左边有浮动对象    
right : 不允许右边有浮动对象

说明: 该属性的值指出了不允许有浮动对象的边。请参阅float属性。 对应的脚本特性为clear

比如:  

1 1 <p style="float:left;width:200px;">this is 1st row</p>2 2 <p style="float:right;width:400px;">this is 2ed row</p>3 3 <p >this is the third row</p>


如果不用清除浮动,那么第3列文字就会和第1、2列文字在一起 ,如下图:

image

所以我们在第3个这列加一个清除浮动 clear:both;  

1 <p style="float:left;width:200px;">this is 1st row</p>2 <p style="float:right;width:400px;">this is 2ed row</p>3 <p style="clear:left;">this is the third row</p>

这时的效果如下:

image

我们在网页设计时还有一种很普遍的情况:

 1 <style type="text/css"> 2 #main {background-color: #3399CC;width: 600px;padding: 20px;} 3 #sidebar {background-color: #FF6600;    float: left;width: 130px;} 4 #container {float: right;width: 420px;background-color: #FFFF33;} 5 </style> 6 <div id="main"> 7 <div id="sidebar">content1 content1 content1</div> 8 <div id="container">content2 content2 content2</div> 9 </div>10 <p style="clear:both;">content3</p>

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

image  
不过Firefox的效果可不是这样的,如下所示:

image

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

 1 <style type="text/css"> 2 #main {background-color: #3399CC;width: 600px;padding: 20px;} 3 #sidebar {background-color: #FF6600;    float: left;width: 130px;} 4 #container {float: right;width: 420px;background-color: #FFFF33;} 5 .clear {clear: both;} 6 </style> 7 <div id="main"> 8 <div id="sidebar">content1 content1 content1</div> 9 <div id="container">content2 content2 content2</div>10 <div class="clear"></div>11 </div>12 <p>content3</p>

这时Firefox下的页面显示也就正常了

image

不过这时会因多加的<div class="clear"></div>标签会引起IE和FF高度变化(如下图,显然IE下蓝色背景的高度增加了):

image

这个高度变化可以通过如下方法解决:

1 .clear {2      clear: both;3      height:1px;4      margin-top:-1px;5      overflow:hidden;6 }

© 著作权归作者所有

共有 人打赏支持
下一篇: 单词日志
dhb_oschina
粉丝 9
博文 221
码字总数 190651
作品 0
程序员
私信 提问
CSS浮动(float,clear)通俗讲解

很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家 写在前面的话: 由于C...

桐桐ESC
2013/03/29
0
6
前端开发面试题总结之——CSS3

相关知识点 题目&答案 如何理解CSS的盒子模型? link和@import的区别? CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS 3新增伪类有哪些? 如何居中div,如何居中一个浮动元素...

sandisen
2017/02/18
0
0
CSS float相关详解

float属性是CSS常用的一个属性,应用场景广泛,同时也是一个难点,涉及到一些相关细节及注意点。因此,就特别整理总结一下。 一、float介绍 float元素也称为浮动元素,设置了float属性的元素...

Ruheng
2017/12/05
0
0
编写跨浏览器兼容的 CSS 代码的金科玉律

作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,...

鉴客
2010/06/09
597
6
div相对定位于绝对定位

一、CSS中的块模型 在CSS的定义中,有的html标签被浏览器当成一个块来显示,比如div、table、p、ul等等,我们称之为块元素;有的html标签被浏览器显示在文本行之间,如a、span、font等等,我...

凉亭-月下殇
2016/11/09
9
0

没有更多内容

加载失败,请刷新页面

加载更多

程序中设置MySQL的默认值

import com.alibaba.fastjson.JSON;import java.beans.PropertyDescriptor;import java.lang.annotation.*;import java.lang.reflect.Field;import java.lang.reflect.Method;impo......

laolin23
9分钟前
0
0
WordPress没有上级目录的写权限

sudo chmod -R 777 wordpress/wp-content

临江仙卜算子
16分钟前
0
0
大数据学习之大数据技术笔记—spring入门

篇一 spring介绍 spring.io 官网 快速开始 Aop 面向切面编程,可以任何位置,并且可以细致到方法上 连接框架与框架 Spring 就是 IOC AOP 思想 有效的组织中间层对象一般都是切入 service 层 ...

董黎明
17分钟前
4
0
ASP.NET Core MVC 静态文件配置

在启动文件中添加以下配置 public class Startup{ public IServiceProvider ConfigureServices(IServiceCollection services) { services.AddDirectoryBrowser(); ......

whltian
46分钟前
1
0
linux之自定义命令

本人使用的是ubuntu系统,不喜欢建各种桌面快捷链接,但是每次启动个软件,去查找又麻烦,所以自定义了命令,来快捷的启动应用: 1、修改/etc/bash.bashrc,在文件末尾,加上如下List-1中的内...

克虏伯
53分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部