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;
} <div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
清除浮动方法
方法一:使用带clear属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
.news {
background-color: gray;
border: solid 1px black;
} .news img {
float: left;
} .news p {
float: right;
} .clear {
clear: both;
} <div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
优点:简单,代码少,浏览器兼容性好。
缺点:需要添加大量无语义的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;
} <div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
方法三:给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。
方法四:使用邻接元素处理
什么都不做,给浮动元素后面的元素添加clear属性。
.news {
background-color: gray;
border: solid 1px black;
} .news img {
float: left;
} .news p {
float: right;
} .content{
clear:both;
} <div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>
方法五:使用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;
} <div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
通过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技巧:清除浮动
1.常用方法——overflow 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容 ...
- css用clearfix清除浮动
本文从http://www.studyofnet.com/news/196.html复制. 本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...
- [转]CSS clear both清除浮动
DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习cs ...
- ife任务刷题总结(一)-css reset与清除浮动
本文同时发布于本人的个人网站www.yaoxiaowen.com 百度创办的前端技术学院,是一个面向大学生的前端技术学习平台.虽然只有大学生才有资格报名,提交代码进行比赛排名.但是这并不妨碍我们这些初 ...
- 深入理解css系列:清除浮动
如果出现div嵌套,内层元素浮动,而外层包裹的父元素div未设置高度的时候,那么会出现外层不能被撑开的情况. HTML标签代码: <div class="wrap"> ...
- css 3种清除浮动方法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- CSS知识点:清除浮动
开场白 我们平时工作中,很容易遇到浮动效果.一个DIV中嵌套多个DIV,左边显示一个DIV,右边显示一个DIV,外层DIV的高度随着内层内容的高度变化.这就是最基本的浮动效果.下图的百度搜索结果就是一 ...
- css公共库——清除浮动
清除浮动是css的基础,但有时候会忘了一些最简单的东西 浮动因为在文档流之外,所以会造成父元素的坍塌.父元素之后的元素排版就会乱. 常用的方法是在浮动父元素中添加cf类,然后定义cf样式,并将其放在公 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- CSS clear both清除浮动总结
我们知道有时候使用了CSS float浮动,会产生CSS浮动,这个时候就需要清理浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习CSS clear知识与用法. clear清除浮动目录 ...
随机推荐
- 驱动编程:NtReadVirtualMemory
NtReadVirtualMemory函数位于ntdll中,作用就是把用户态的函数调用翻译成相应的系统调用,进入内核态.内核中一般有一个相同名字的处理函数,接收到该类型的系统调用后做实际的工作. NT ...
- 剑指Offer面试题:26.字符串的排列
一.题目:字符串的排列 题目:输入一个字符串,打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a.b.c所能排列出来的所有字符串abc.acb.bac.bca.cab和cba. 二 ...
- 使用C#给Linux写Shell脚本(下篇)
在上篇的<使用C#给Linux写Shell脚本>结尾中,我们留下了一个关于C#如何调用BashShell的问题.在文章发布之后,我留意到有读者留言推荐使用“Pash”(一款类PowerSh ...
- RegSvr32注册OCX时报错
RegSvr32注册OCX时报错. 错误1: 模块“dsoframer2007.ocx”已加载,但对 DllRegisterServer 的调用失败,错误代码为 0x80070005. 有关此问题的详 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (21) -----第四章 ASP.NET MVC中使用实体框架之在页面中创建查询和使用ASP.NET URL路由过虑
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 4.2. 构建一个搜索查询 搜索数据是几乎所有应用的一个基本功能.它一般是动态的,因 ...
- linux java 版本
之前linux已经安装了1.6的版本, 我想要升级,于是安装了1.7, /etc/profile 的最后几行是这么写的: JAVA_HOME=/usr/java/jdk1.7.0_79JRE_HOME ...
- spring快速入门(一)
对于为什么使用spring框架,这里不多做解释,详情请百度.本人推荐面向驱动程序学习,通过实战来瞧瞧spring技术的伟大.所以先来看看原始开发一个简单的例子,由例子引入spring相关的技术.如果错 ...
- ios crash的原因与抓取crash日志的方法
首先我们经常会闪退的异常有哪些呢?crash的产生来源于两种问题:违反iOS策略被干掉,以及自身的代码bug. 1.IOS策略 1.1 低内存闪退 前面提到大多数crash日志都包含着执行线程的栈调用 ...
- KnockoutJS 3.X API 第七章 其他技术(7) 微任务
注意:本文档适用于Knockout 3.4.0及更高版本. Knockout的微任务队列 Knockout的微任务队列支持调度任务尽可能快地运行,同时仍然是异步的,努力安排它们在发生I / O,回流或 ...
- HTML5新增标签与属性
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...