css清除浮动的三种方法

摘要:css清除浮动float的三种方法总结,为什么要清除浮动?浮动会有哪些影响?

一.先看现象(display:block)

分析HTML代码结构:
<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
分析CSS代码样式:
.outer{border:1px soild #ccc;background:#fcg;color:#fff;margin:50px auto;padding:50px;} .div1{width:80px;height:80px;background:red;float:left;} .div2{width:80px;height:80px;background:blue;float:left} .div3{width:80px;height:80px;background:sienna;float:left}

   这里没有设置在外层的div.outer设置高度,但是我们知道如果它里面的元素不浮动的化,那么这个外层的高是自动被撑开的。但是当内层元素浮动后,就出现了一下影响:

(1)背景不能显示;(2)边框不能撑开;(3)margin设置值不能正常的显示。

二.清楚css浮动

方法一:添加新的元素,应用clear:both;
HTML代码:
<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
css:
.clear{clear:both;height:0;line-height:0;font-size:0}
result:(纠正:padding不会受影响)


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

HTML:
<div class="outer over-flow"> //这里添加了一个class <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>

CSS:
.over-flow{overflow:auto;zoom:1;//zoom:1;是在处理兼容性问题}

   原理:使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性属性值:hidden,auto,visible。我们可以使用hidden和auto值来清除浮动,但是切记不能使用visible,如果是用这个值无法达到清除浮动效果,其他的两个值都可以。

方法三:after方法(主义:作用于浮动元素的父级)

  原理:这种方法清除浮动是现在网上流行的一种清除浮动,它就是利用:after和before来在元素内部插入两个元素块,从而达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看其具体的使用方法:

.outer{zoom:1;} .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的作用是允许浏览器渲染它,但是不显示出来,这样才能实现浮动。

总结:
清除浮动的方式有很多种,但是不是每种都适合你,也不是每种都能很好的兼容所有浏览器,所以参照你觉得最好的方式去做,个人觉得方法三不错,不需要多余的标签,而且也能很好的兼容。主义:当一个内层元素是浮动时,如果没有关闭浮动,其父级元素也就不会在包含这个浮动的内层元素,因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,940评论 1 84
  • 先上一个简单的例子 如图所示,图片被添加了float:left属性,实现了文字环绕效果.但是再给div加了bord...
    流光号船长阅读 329评论 0 0
  • <!DOCTYPE html> 3_3HOMEWORK /*! Twitter Bootstrap //! ...
    ooocoo阅读 412评论 0 0
  • CSS中的浮动简单介绍 浮动是CSS中的一个属性float来实现的,通过设置属性值left、right来实现元素的...
    前端小白丁阅读 31评论 0 0
  • 1.浮动产生负作用 背景不能显示由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或...
    莫失丿莫忘阅读 65评论 0 1