CSS清除浮动方法总结
什么是CSS清除浮动?
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。
引用W3C的例子,news容器没有包围浮动的元素。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
清除浮动方法
方法一:使用带clear属性的空元素
在浮动元素后使用一个空元素如
,并在CSS中赋予
.clear{clear:both;}
属性即可清理浮动。亦可使用
或
来进行清理。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
优点:简单,代码少,浏览器兼容性好。
缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。
方法二:使用CSS的overflow属性
给浮动元素的容器添加
overflow:hidden;
或
overflow:auto;
可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。
.news {
background-color: gray;
border: solid 1px black;
overflow: hidden;
*zoom: 1;
}
.news img {
float: left;
}
.news p {
float: right;
}
some text
方法三:给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。
方法四:使用邻接元素处理
什么都不做,给浮动元素后面的元素添加clear属性。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.content{
clear:both;
}
注意这里的div.content有内容。
方法五:使用CSS的:after伪元素
结合 :after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 触发 hasLayout */
zoom: 1;
}
通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点".",并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。
总结
通过上面的例子,我们不难发现清除浮动的方法可以分成两类:
一是利用 clear 属性,包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素,其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),使到该父元素可以包含浮动元素,关于这一点。
在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式;在小模块如ul里使用overflow:hidden;(留意可能产生的隐藏溢出元素问题);如果本身就是浮动元素则可自动清除内部浮动,无需格外处理;正文中使用邻接元素清理之前的浮动。
最后可以使用相对完美的:after伪元素方法清理浮动,文档结构更加清晰。这也是比较常用的方法。
CSS清除浮动方法总结的更多相关文章
- CSS清除浮动方法集合
CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...
- DIV+CSS 清除浮动方法总结
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...
- css清除浮动方法大全
清除浮动这个问题,做前端的应该再熟悉不过了,也是每一个web前台设计师 必须掌握的机能. 为什么浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width ...
- DIV+CSS清除浮动方法
一.为什么要清除浮动? 1>父元素在未定义高的情况下,由于子元素全部浮动脱离文本流,而造成父元素高的塌陷(正常情况下,父元素的高是由未浮动的子元素撑起来) 2>因为部分子元素的而浮动,脱离 ...
- css清除浮动方法小结
清除浮动其实主要解决的就是高度塌陷问题,具体在此不再赘述~~~那些年我们一起清除过的浮动(大佬博客,写的挺不错) 方法小结:1. 1)添加额外标签 这是在学校老师就告诉我们的 一种方法,通过在浮动元素 ...
- 【转】CSS清除浮动_清除float浮动
CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...
- CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里 ...
- css清除浮动大全共8种方法
原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...
- CSS清除浮动八种方法
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...
随机推荐
- BZOJ 4165 矩阵 堆
先把每个长为$mina$,宽为$minb$的矩阵扔到堆里,然后由于矩阵中的数都是正的,所以我们每取出来一个矩形,,就把他向四个方向扩张一行,再把这新的且更大的四个矩形扔到堆里.注意判重,于是我比较懒用 ...
- Django-- CRM1客户建表与装饰器
一.CRM项目(1) 引入三个表:用户表,客户表,校区表,班级表,梳理逻辑关系并迁移数据库,生成表. 使用admin插入数据,admin是Django提供的web形式的后台数据管理页面,它是和用户认证 ...
- Caused by: MetaException(message:Hive Schema version 2.1.0 does not match metastore's schema version 1.2.0 Metastore is not upgraded or corrupt)
解决方案汇总: ()删除HDFS上的hive数据与hive数据库 hadoop fs -rm -r -f /tmp/hive hadoop fs -rm -r -f /user/hive ()删除My ...
- APP测试常见功能测试点汇总
本文总结了一些APP功能测试中经常遇见测试点,仅供参考,是好早以前看哪位前辈总结的,一直在使用,所以也稍微的修改了下放到自己的博客中,以备日后温习.1.安装和卸载安装和卸载是任何一款APP中都属于最基 ...
- Jetty项目解压目录设置
Ubuntu14.04 没有在Jetty的根目录下建立work文件夹时,Jetty会默认将项目解压到/var/cache/jetty/data/下,如果在Jetty的根目录下建立work文件夹,jet ...
- Spark Mllib里的分层抽样(使用map作为分层抽样的数据标记)
不多说,直接上干货! 具体,见 Spark Mllib机器学习实战的第4章 Mllib基本数据类型和Mllib数理统计
- ACdream 1430——SETI——————【后缀数组,不重叠重复子串个数】
SETI Time Limit: 4000/2000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) Submit Statist ...
- JavaSE_4_集合
1.Map和ConcurrentHashMap的区别? Map和ConcurrentHashMap的区别,Map是接口,ConcurrentHashMap是实现类 2.hashMap内部具体如何实现的 ...
- JavaSE_2_关键字
1.介绍一下Syncronized锁,如果用这个关键字修饰一个静态方法,锁住了什么?如果修饰成员方法,锁住了什么? synchronized是Java中的关键字,是一种同步锁.它修饰的对象有以下四种: ...
- hibernate课程 初探单表映射2-1 hibernate进阶 本章简介
本章简介,主要讲5大块的内容 1 hibernate.cfg.xml的配置 2 session 的简介 3 transaction的简介 4 session的详解 5 对象关系映射常用配置