将清除浮动代码添加到重置样式表中，随时可以调用

 .clearfix{margin-right:auto;margin-left:auto;*zoom:}.clearfix:before,.clearfix:after{display:table;content:"";line-height:}.clearfix:after{clear:both}

给需要清除浮动影响的元素添加class名 --- clearfix 例：

 <!-- css -->

     <style>

         .top {

             width: 100%;

             height: 200px;

             background-color: yellow;

         }

         .middle .content {

             float: left;

             margin-top: 20px;

             width: 100px;

             height: 400px;

             background-color: blue;

         }

         .clearfix {margin-right:auto;margin-left:auto;*zoom:}

         .clearfix:before,.clearfix:after {display:table;content:"";line-height:}

         .clearfix:after{clear:both}

     </style>
 <!-- html -->

 <body>

     <div class="top"></div>

     <div class="middle clearfix">

         <div class="content"></div>

     </div>

 </body>

css清除浮动影响的更多相关文章

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

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

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

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

  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清除浮动？

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

  7. CSS清除浮动各种方法

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

  8. css清除浮动的八大方法

    清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...

  9. css清除浮动float方法

    转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...

随机推荐

  1. 从iPhone下滑 看科技转型之困

    看科技转型之困" title="从iPhone下滑 看科技转型之困"> 毫无疑问,苹果正在面临一次关键转型.最近苹果股价较高点134.54美元下跌21%以上的实事, ...

  2. Redis 中的过期元素是如何被处理的？视频+图文版给你答案——面试突击 002 期

    本文以面试问题「Redis 中的过期元素是如何被处理的?」为切入点,用视频加图文的方式和大家聊聊 Redis 过期元素被处理的相关知识点. 涉及的知识点 过期删除策略有哪些? 这些过期策略有哪些优缺点 ...

  3. java反序列化-ysoserial-调试分析总结篇(7)

    前言: CommonsCollections7外层也是一条新的构造链,外层由hashtable的readObject进入,这条构造链挺有意思,因为用到了hash碰撞 yso构造分析: 首先构造进行rc ...

  4. js中的内置方法的兼容写法

    1.如果浏览器不支持every属性,every的实现原理 if(Array.prototype.every===undefined){ Array.prototype.every=function(f ...

  5. python装饰器之函数作用域

    1.函数作用域LEGB L:local函数内部作用域 E:enclosing函数内部与内嵌函数之间 G:global全局作用域 B:build-in内置作用域 passline = 60 def fu ...

  6. Java Opencv 实现 中值滤波器

    原理 Note 以下原理来源于Richard Szeliski 的著作 Computer Vision: Algorithms and Applications 以及 Learning OpenCV ...

  7. golang 学习之路 string转换为其他类型 其他类型转换为string

    将其他值转换为string 一般常用fmt.Sprintf(格式,转换的值) // 使用fmt.Sprintf 转换所有的类型为string 使用 这是第一种 // 注意在sprintf使用中需要注意 ...

  8. JVM01——JVM内存区域的构成

    从本文开始将为各位带来JVM方面的知识点,关注我的公众号「Java面典」了解更多Java相关知识点. JVM内存主要分为三部分线程私有(Thread Local).线程共享(Thread Shared ...

  9. c++第一章1.6

    测试已完成(bingo)     1 [单选题] 下面代码能够实现交换操作的函数有(       )   A. swap(int a,int b) { int t=a;a=b;b=t;} B. swa ...

  10. juery 实现选项卡

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...