清除浮动的三种方法

原创 2018年04月16日 11:31:10

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:0; line-height:0; font-size:0; }

方法二:父级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:1;  } //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:1; } //为了兼容性,因为ie6/7不能使用伪类,所以加上此行代码。
.outer:after { clear:both;content:'';display:block;width:0;height:0;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 伪元素配合使用,来插入生成内容。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wang414300980/article/details/79958432

清除浮动效果的三种方式

浮动效果 满足我们的页面排版要求,使竖列的盒子横向的排列起来。 负作用:因为浮动元素脱离了标准文档流,会导致父级元素无法被撑开。解决方式:清除浮动负面效果(三种方式) 添加空盒子 优点:较流行 ...
  • star0311
  • star0311
  • 2017-05-03 20:21:36
  • 565

CSS清除浮动的几种方法

浮动的几个重要性质首先,浮动有几个很重要的性质 脱标:脱离标准文档流 贴边(浮动会紧贴着浮动方向的边 字围(浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动...
  • u011342403
  • u011342403
  • 2017-04-24 06:49:22
  • 904

04 CSS-浮动和清除浮动的三种方法

浮动的性质:脱标、贴边、字围、收缩。
  • luyu13141314
  • luyu13141314
  • 2016-12-08 12:47:50
  • 377

CSS 清除浮动的三种方式

代码: 1 2 3 其 css 样式为: .outer{border: 1px solid #ccc;background: #fc9;color: #fff; ma...
  • Cherry4115
  • Cherry4115
  • 2016-03-02 21:53:59
  • 250

[CSS]CSS浮动float详解(三):清除浮动方案

阅读前请看[CSS]CSS浮动float详解(二):使用floatfloat虽然带来了很多好处,但是也带来了一些问题。问题: 测试 *{ ...
  • xf616510229
  • xf616510229
  • 2016-12-16 17:55:59
  • 446

CSS浮动(float)属性的原理以及清除浮动的几种方法

浮动(float)的定义 浮动的元素可以向左或向右移动,直到它的外边框碰到父元素的边框或者其他浮动框的边框为止!(注意是其他浮动框的边框!敲黑板!) 设置为浮动的元素不在文档普通流中。 浮动的过程 第...
  • hyr_ii
  • hyr_ii
  • 2016-12-18 21:09:57
  • 395

清除浮动的四种方式及其原理理解

清除浮动的四种方式及其原理理解 本文介绍了四种清除浮动的方法,并尝试解释其原理。在理解了各种清除浮动的原理之后,你会发现,很多清除浮动的方法本质上其实是一样的。掌握这些原理,相信你可以根据场...
  • u012207345
  • u012207345
  • 2017-10-19 08:47:46
  • 398

css清除浮动float的七种常用方法总结和兼容性处理

7、万能清除法 **after伪类** 清浮动(现在**主流**方法,**推荐使用**) ``` 选择符:after{ content:"."; clear:both; ...
  • promiseCao
  • promiseCao
  • 2016-10-09 23:04:14
  • 20305

CSS清除浮动的五种方式

浮动元素会影响整体的布局,但是有些情况又不得不让元素浮动来更好的构成页面,下面整理五种常用的清楚浮动的方法: (注:为了节省时间,将方法写在了class名内,看懂即可) 1,为父元素添加高度: ...
  • Manson_zh
  • Manson_zh
  • 2017-07-04 15:33:07
  • 579

清除浮动的4种方式

清除浮动:根据情况需要来清楚浮动 。  清除浮动的目的: 就是为了解决 父 盒子高度为0 的问题。 1.、额外标签法   给浮动盒子的后面添加一个新的div 2、overflow:hidden 触发了...
  • sinat_36146776
  • sinat_36146776
  • 2016-10-18 18:47:11
  • 689
收藏助手
不良信息举报
您举报文章:清除浮动的三种方法
举报原因:
原因补充:

(最多只允许输入30个字)