今天看到一篇文章关于清除浮动的，突然间脑袋短路了，咦？为什么要清除浮动？原谅我的无知，搜了下原来是这样，又倒腾出原来的笔记，唉，本来就有记录啊，而且也会经常用到，用的久了连原理都忘了。恩，防止自己再犯同样的错误，我还是自己总结整理出来吧！话不多说，代码为证！

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>为什么要清除浮动</title>

         <style>

             .wrapper{width:50%;background: cornflowerblue;border:2px solid black;}

             .box1{width: 30%;height: 100px;background: red;}

             .box2{width: 30%;height: 100px;background: black;}

             .box3{width: 30%;height: 100px;background: chocolate;}

         </style>

     </head>

     <body>

         <div class="wrapper">

             <div class="box1"></div>

             <div class="box2"></div>

             <div class="box3"></div>

         </div>

     </body>

 </html>

恩，各个浏览器运行的效果图如下：

其中A-B-C分别是I元素里的子元素，如果没有浮动的情况它们是按照标准文档流布局（块级元素从上至下，行内元素从左至右），一个网页需要合理的布局才能够吸引住用户，我们需要在有限的空间内展示更多的信息，有时候需要a,b,c,排在一行，咱不用高大上的Flexbox（弹性盒布局）因为IE8及以下都不支持，你要问我怎么知道的，给大伙儿甩个网址http://caniuse.com/#home，自行搜索哦！另外IE不支持VW和VH单位，用的小朋友谨慎！ 通常情况

我们是不需要给父元素定宽高的，而且想让它宽高自适应，但是如果我们给子元素添加了float：left;之后会是什么情况呢？咱们用图说话：

父元素哪里去了？！恩，这里咱要说明下浮动是什么原理了，打个比方吧，原谅我的想象力不丰富，我们把父元素想象为一个可以自动收缩的盒子，当我们不停地往里面放子盒子的时候，它就会自动被撑开，给子元素加float（英文原义指飘动浮动的意思）的时候，就相当于子元素飘在了父盒子之上，那么显然父盒子空了就自动收缩回去了，现在我们要做的是如何不让它收缩回去：

1.给父元素加overflow：hidden；恩，要说这个方法的优劣，我刚才查了下，可能会对SEO不友好，但具体有多大的严重影响我还没有这方面的经验，姑且就这样解释吧，待我遇到了再回过来修改。

.wrapper{width:50%;background: cornflowerblue;border:2px solid black;overflow:hidden;}

2.给子元素的下方添加空的div

 <body>

         <div class="wrapper">

             <div class="box1"></div>

             <div class="box2"></div>

             <div class="box3"></div>

             <div class="box4"></div>

         </div>

     </body>

box4就是我们添加的空元素，这个空元素的具体写法如下：（有兼容~有兼容~有兼容~万恶的IE6不支持，因为人家有默认的最小高度）

 .box4{clear:both;height: 0;overflow: hidden;}

3.采用伪类选择器的方式来达到清除浮动的目的，我工作中采用的就是这种方式，屡试不爽哦！（不好意思，刚才自己给自己挖了一个坑，目前还在坑里，我再试试...）

.wrapper:after{clear:both;content:".";display:block;height: 0;overflow: hidden;visibility: hidden;}

恩，好了，就是上面的那样，content: '.'; display:block;对于五大浏览器来说不可缺少，visibility:hidden;的作用是允许浏览器解析它，但是用户看不到哦。

原创文章，转载请注明出处 蜗蜗牛在路上[http://www.cnblogs.com/wowoniuzailushang]

同步发表于:http://blog.csdn.net/wowoniuzailushang  CSDN

CSS清除浮动的更多相关文章

  1. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  2. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  3. CSS清除浮动八种方法

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...

  4. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  5. css清除浮动定位造成的异常

    清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...

  6. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  7. 什么是CSS清除浮动？

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

  8. CSS清除浮动的方法

    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...

  9. css 清除浮动 兼容IE+, FF

    上代码: <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...

  10. CSS清除浮动各种方法

    当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现 ...

随机推荐

  1. HTML input小结

    一.Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1.type=text 输入类型是text,这是我们 ...

  2. ESENT分布式数据存储

    关于ESENT,我能想到最恰当的比喻是,它是Microsoft世界的BerkeleyDB,鲜为人知,很少有.NET开发人员使用它,rhino-queues项目使用就是它,但它的性能和可靠性已经经受住了 ...

  3. 细数iOS上的那些安全防护

    细数iOS上的那些安全防护  龙磊,黑雪,蒸米 @阿里巴巴移动安全 0x00 序 随着苹果对iOS系统多年的研发,iOS上的安全防护机制也是越来越多,越来越复杂.这对于刚接触iOS安全的研究人员来说非 ...

  4. 我的Git手册

    本文肯定不是Git的最佳的教程,它只是本人的Git操作手册,我将从一些实际问题出发,让熟悉SVN用户顺利过度到Git来(当然包括我自己了),其中会加入一些个人感受或看法,相信会对大家有些启发.另外,全 ...

  5. GIS规划应用——基于哈夫模型的GIS服务区分析

    1.  GIS服务区分析 区位因素是商业分析中一个至关重要的因素,因此在商店选址时,例行的服务区分析十分重要.服务区是指顾客分布的主要区域,在其范围内该店的商品销售量或服务营业额超过其竞争对手.对于现 ...

  6. ASP.NET MVC 5– 使用Wijmo MVC 5模板1分钟创建应用

    开始使用 使用ComponentOne Studio for ASP.NET Wijmo制作MVC5应用程序,首先要做的是安装Studio for ASP.NET Wijmo . 测试环境 VS201 ...

  7. 《Entity Framework 6 Recipes》中文翻译系列 (25) ------ 第五章 加载实体和导航属性之加载完整的对象图和派生类型上的导航属性

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-5  加载完整的对象图 问题 你有一个包含许多关联实体的模型,你想在一次查询中, ...

  8. JavaScript算法（冒泡排序、选择排序与插入排序）

    冒泡排序.选择排序与插入排序复杂度都是二次方级别的,放在一起说吧. 介绍一些学习这三个排序方法的比较好的资料.冒泡排序看<学习JavaScript数据结构与算法>介绍的冒泡排序,选择排序看 ...

  9. VVDocumenter 使用

    函数说明文档插件下载链接 https://github.com/onevcat/VVDocumenter-Xcode 下载后,直接运行项目 升级Xcode后可能不能再次使用,需要做一些处理从Xcode ...

  10. 有关bootstrap

    最近在接触对移动浏览器很友好的bootstrap,遂整理了一点笔记: 简单的html页面: <!DOCTYPE html><html> <head> <tit ...