clear both
原文地址:http://www.codefans.net/articles/653.shtml
因CSS很多布局是需要浮动的,当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,为了使float后面的元素不被float浮动层的影响,我们就需要用clear:both;来清除。比如下面的例子:
1 |
< p style = "float:left;width:200px;" >第1列,</ p > |
2 |
< p style = "float:left;width:400px;" >第2列,</ p > |
3 |
< p style = "clear:both;" >第3列。</ p > |
如果没有清除浮动,那么第3列文字就会和第1、2列文字连在一起 ,所以需要在第3个列上加入清除浮动的代码。
一般情况下,我们会为清除浮动专门定义一个CSS类,用时候直接引用,这样更方便,比如:
01 |
< style > |
02 |
.clear {clear: both;} |
03 |
</ style > |
04 |
<!--以下为调用方法--> |
05 |
< div class = "clear" ></ div > |
06 |
07 |
<!--比如上面的例子可以写成:--> |
08 |
< p style = "float:left;width:200px;" >第1列,</ p > |
09 |
< p style = "float:left;width:400px;" >第2列,</ p > |
10 |
< div class = "clear" ></ div > |
11 |
< p >第3列。</ p > |
因为IE和火狐存在兼容性问题,所以有时候这样定义清除浮动会在不同浏览下效果会不同,IE也说的过去,在火狐下或许就不灵了,下面给出一个经过调试的CSS清除浮动代码,供参考:
1 |
.clear { |
2 |
clear: both; |
3 |
height:1px; |
4 |
margin-top:-1px; |
5 |
overflow:hidden; |
6 |
} |
清除浮动一般是在外层Div结束前,如果放在结束后,则无效。
clear both的更多相关文章
- Crystal Clear Applied: The Seven Properties of Running an Agile Project (转载)
作者Alistair Cockburn, Crystal Clear的7个成功要素,写得挺好. 敏捷方法的关注点,大家可以参考,太激动所以转载了. 原文:http://www.informit.com ...
- List集合的removeAll(Collection<E> col) 和clear方法的区别
//removeAll()方法private static void testList(){ List<String> list = new ArrayList<String> ...
- CSS清浮动处理(Clear与BFC)
在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <h ...
- python dict clear只能删除一层,不能够递归删除。
void PyDict_Clear(PyObject *op) { dictobject *mp; dictentry *ep, *table; int table_is_malloced; Py_s ...
- clear属性
clear:规定元素的哪一侧不允许其他浮动元素. clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上 ...
- css 清除浮动 clear
.clearfix{ zoom:1;/*对于老版本的IE进行兼容的设置*/ } .clearfix:after{ content:""; display:block; visibi ...
- div+css中clear用法
一开始用clear属性,只是跟float相对使用,今天看视频的时候还是不大明白,查了下资料原来是这样的哦,看咯. clear属性值有四个clear:both|left|right|none; 作用:该 ...
- BFC之清除浮动篇&clear
我们在日常代码生活中,或多或少会利用浮动来布局,例如导航布局,如下图所示: 但是,我们在实现的时候,经常会遇到父元素“塌陷”以及清除浮动问题.例如 <!DOCTYPE html> < ...
- CSS-float详解,深入理解clear:both[转+部分原创]
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素 ...
- java.nio.ByteBuffer中flip,rewind,clear方法的区别
对缓冲区的读写操作首先要知道缓冲区的下限.上限和当前位置.下面这些变量的值对Buffer类中的某些操作有着至关重要的作用: limit:所有对Buffer读写操作都会以limit变量的值作为上限. p ...
随机推荐
- 带中文的路径导致NSURL初始化一直为null的问题
一.问题描述 在学习Ojective-C过程中,需要读取文件中的内容,但发现指针变量url的值一直为nil. 代码如下: NSString *strUrl=@"file:///Users/f ...
- 最牛逼android上的图表库MpChart(二) 折线图
最牛逼android上的图表库MpChart二 折线图 MpChart折线图介绍 MpChart折线图实例 MpChart效果 最牛逼android上的图表库MpChart(二) 折线图 最近工作中, ...
- Android Volley入门到精通:使用Volley加载网络图片
在上一篇文章中,我们了解了Volley到底是什么,以及它的基本用法.本篇文章中我们即将学习关于Volley更加高级的用法,如何你还没有看过我的上一篇文章的话,建议先去阅读Android Volley完 ...
- python安装paramiko模块
一.简介 paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接. 由于使用的是python这样的能够跨平台运行的语言,所以所有python支 ...
- 基于SSH2的OA项目1.1_20161207_业务开发
1.1建立用户的pojo模型 建立user.java package org.guangsoft.pojo; import java.util.HashSet; import java.util.Se ...
- SQL语句题库
一. 填空题 Not Only SQL数据库 泛指 非关系型数据库 . SYS和SYSTEM用户都是Oracle 的系统用户,它们都使用SYSTEM表空间,其中 sys 拥有更大的权限. O ...
- iOS多线程编程之NSThread的使用
目录(?)[-] 简介 iOS有三种多线程编程的技术分别是 三种方式的有缺点介绍 NSThread的使用 NSThread 有两种直接创建方式 参数的意义 PS不显式创建线程的方法 下载图片的例子 ...
- UI课堂笔记
2016.7.18 + (UIColor *)blackColor; + (UIColor *)darkGrayColor; 深灰色 + (UIColor *)lightGrayColor; 浅 ...
- merge
当两个DataFrame相加的时候,如果,其中一个不全则会相加产生NA,所以必须一次性将数据的索引索引确定下来,然后对所有数据重建索引然后,填充0,再相加.否则有数据的和没数据的相加结果都变为了NA, ...
- Linuxc:创建与监控多个子进程
#include <unistd.h> #include <sys/types.h> #include <stdlib.h> #include <signal ...