1. 什么时候需要清除浮动?清除浮动有哪些方法?
(1)对元素进行了浮动(float)后,该元素就会脱离文档流,浮动在文档之上。在CSS中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
float主要流行与页面布局,然后在使用后没有清除浮动,就会后患无穷。
先看实例:
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;}
.div1{ width:80px; height:80px; background:#f00; float:left; }
.div2{ width:80px; height:80px; background:blue; float:left; }
.div3{ width:80px; height:80px; background:sienna; float:left; }

 如上图所示,是让1、2、3这三个元素产生浮动所造成的现象。
下面看一下,如果这三个元素不产生浮动,会是什么样子?
.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;}
.div1{ width:80px; height:80px; background:#f00; /*float:left;*/ }
.div2{ width:80px; height:80px; background:blue;/* float:left; */}
.div3{ width:80px; height:80px; background:sienna;/* float:left;*/ }
如上图所示,当内层的1/2/3元素不浮动,则外层元素的高是会被自动撑开的。
所以当内层元素浮动的时候,就出现以下影响:
背景不能显示;边框不能撑开;margin设置值不能正确显示。
(2)清除浮动
方法一:添加新的元素,应用 clear:both;
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;}
.div1{ width:80px; height:80px; background:#f00; float:left; }
.div2{ width:80px; height:80px; background:blue; float:left; }
.div3{ width:80px; height:80px; background:sienna; float:left; }
.clear{ clear:both; height:; line-height:; font-size:; }

方法二:父级div定义 overflow:auto;(主意:是父级div,也就是这里的 div.outer)

<div class="outer over-flow">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
 
.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;}
.div1{ width:80px; height:80px; background:#f00; float:left; }
.div2{ width:80px; height:80px; background:blue; float:left; }
.div3{ width:80px; height:80px; background:sienna; float:left; }
.over-flow{ overflow:auto; zoom:; } //zoom:1;是在处理兼容性问题

原理:使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hidden和auto值来清除浮动,但切记不能使用visible值,如果使用这个值,将无法达到清除浮动效果,其他两个值都可以。
overflow 属性规定当内容溢出元素框时发生的事情。
方法三:据说最高大上的方法,:after方法。(注意:作用于浮动元素的父亲)

 原理:利用:after和:before来在元素内部插入两个元素块,从而达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html中插入一个div.clear标签,而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。
.outer { zoom:; } //为了兼容性,因为ie6/7不能使用伪类,所以加上此行代码。
.outer:after { clear:both;content:'';display:block;width:;height:;visibility:hidden; }
 

 其中clear:both;指清除所有浮动;content:' . ';display:block; 对于FF/Chrome/opera/IE8不能缺少,其中content()取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它,但是不显示出来,这样才能实现清除浮动。 

利用伪元素,就可以不再HTML中加入标签。

:after 的意思是再.outer内部的最后加入为元素:after,

首先要显示伪元素,所以display:block,

然后为伪元素加入空内容,以便伪元素中不会有内容显示在页面中,所以, content:"";

其次,为使伪元素不影响页面布局,将伪元素高度设置为0,所以, height:0,

最后,要清除浮动,所以,clear:both。

tips:
content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。

清除浮动float (:after方法)的更多相关文章

  1. 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  2. css清除浮动float的几种方法

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...

  3. 更优雅的清除浮动float方法

    上篇文章是利用 :after 方法清除浮动float(作用于浮动元素的父元素上). ; } //为了兼容性,因为ie6/7不能使用伪类,所以加上此行代码. .outer:after {;;visibi ...

  4. css清除浮动float

    css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</ ...

  5. 如何清除浮动(float)所带来的影响

    清除浮动(float) 1.定义和用法 在w3c中给了浮动这样的定义. "float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素 ...

  6. CSS清除浮动8大方法

    CSS清除浮动是每一位web前端工程师都要掌握的技术,也是让每一位刚入门的前端工程师感到头疼的问题, 下面就来讲一下CSS清除浮动的原理和各种解决方法,大家可以根据实际情况选择最佳的解决方案. 在用D ...

  7. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

  8. float包裹性与破坏性及清除浮动几种方法

    1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响”  学习视频录制推荐的教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...

  9. css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class=&quo ...

随机推荐

  1. JT/T 1077-2016《道路运输车辆卫星定位系统车载视频平台技术要求》平台标准符合性检测合同

    合同编号: 道路运输车辆卫星定位系统 平台标准符合性检测合同 委托方(甲方): 受托方(乙方): 交通运输通信信息工程质量检测中心 签订时间: 签订地点: 北京市 委托方(甲方): 委托方(甲方): ...

  2. Java - 静态内部类

    Java语言允许在类中再定义类,这种在其它类内部定义的类就叫内部类.内部类又分为:常规内部类.局部内部类.匿名内部类和静态嵌套类四种. 1.静态内部类定义 静态内部类,定义在类中,任何方法外,用sta ...

  3. struts2入门第一天----------配置环境

    放假之后有空就开始走上了三大框架的学习.第一个选择的框架是struts2.首先第一步当然是环境的配置.去apache官网把struts2下载下来.然后在自己的开发工具下创建一个web项目.在lib文件 ...

  4. ajax原生js及readystate/status

    菜鸟教程 ←← GET: <script> function  ajaxGet(){ var  xmlhttp; if(window.XMLHttpRequest){ //TE7+  Fi ...

  5. OC中block作方法参数时的用法

    方式一.在传参时直接声明block回调方法. 1. 定义方法: - (int)doTest:(NSString *)name para1:(int)temp1 para2:(int)temp2 suc ...

  6. C语言数组篇(一)一维数组

       0.  数组的两种表现形式         一种是常见的a[10];         //初学者常用         另一种是用指针表示的数组.   //实际工程使用.常用于参数传递       ...

  7. python基础之入门基础

    编程语言分类 机器语言 使用二进制代码直接编程,直接与硬件交互,执行速度非常快,灵活,但是开发难度高,开发效率低下,缺乏移植性. 汇编语言 对机器语言指令进行了英文封装,较机器语言容易记忆,直接与硬件 ...

  8. 20145202马超《java程序设计》第一周学习总结

    这两天的学习让我对java有了初步的了解. 1.java是SUN公司推出的面相网络的编程语言. 特点:完全面向对象,与平台无关,跨平台性(例如c++只能在windows上执行,然而java并没有这些限 ...

  9. PHP.TP框架下商品项目的优化2-图片优化

    图片存储.上传.显示优化 1.图片路径写进配置文件,当路径有变动时[因业务扩大,服务器存储图片空间不足等],只需修改配置文件,而不用修改代码 2.封装显示.上传.删除函数,实现代码重用 [可类比其他类 ...

  10. 2599: [IOI2011]Race

    2599: [IOI2011]Race 链接 分析 被memset卡... 点分治,对于重心,遍历子树,记录一个数组T[i],表示以重心为起点的长度为i的路径中最少的边数是多少.然后先遍历子树,更新答 ...