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

 .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. Picaso完美兼容OkHttp3.3，缓存优化两不误 - Tamic Developer"s Blog

    为何在Fresco,Glide这么强大的背景下,我又想起了当初的Picasso,又为何写这篇文章?是因为最近项目采用了square公司的RxAndroid,Retrfit和OKhttp, 不得不联想到 ...

  2. C/C++ 存储类别

    table { margin: auto; } 本文介绍 C/C++ 中的存储类别.所谓的"存储类别"究竟是什么意思? 存储类别主要指在内存中存储数据的方式,其大致牵涉到变量的三个 ...

  3. Java面试必问之Hashmap底层实现原理(JDK1.7)

    1. 前言 Hashmap可以说是Java面试必问的,一般的面试题会问: Hashmap有哪些特性? Hashmap底层实现原理(get\put\resize) Hashmap怎么解决hash冲突? ...

  4. js面试-手写代码实现new操作符的功能

    我们要搞清楚new操作符到底做了一些什么事情? 1.创建一个新的对象 2.将构造函数的作用域赋给新对象(因此this指向了这个新对象) 3.执行构造函数中的代码(为这个新对象添加属性) 4.返回新对象 ...

  5. 新大陆NB-IoT模块烧写详细过程

    NB-IOT 模块板设置 1. NB-IOT 模块板如下 2.将模块上红色开关 1. 2 向下拨, 3. 4 开关向上拨,如下 3.将黑色开关向左侧拨至 M3 芯片处,如下 4.将模块上启动/下载开关 ...

  6. 使用node打造自己的命令行

    一.实现一个简单的功能 二.环境 1.系统: window 10 2.编辑器: vscode 3.node版本: 8.7.0 三.开始玩 1.打开命令行,新建一个pa'ckage.json npm i ...

  7. es6的解构函数

    话说,解构无处不在啊,鄙人自从用了vue写项目以来,总是遇到各路大神莫名其妙的写法,然并未出任何错,查之,然解构也,呜呼哀哉,进而习之. 解构(Destructuring):是将一个数据结构分解为更小 ...

  8. AlphaGo、人工智能、深度学习解读以及应用

    经过比拼,AlphaGo最终还是胜出,创造了人机大战历史上的一个新的里程碑.几乎所有的人都在谈论这件事情,这使得把“人工智能”.“深度学习”的热潮推向了新的一个高潮.AlphaGo就像科幻电影里具有人 ...

  9. 03 Hibernate入门

    Hibernate 说明 由于JPA是sun公司制定的API规范,所以我们不需要导入额外的JPA相关的jar包,只需要导入JPA的提供商的jar包.我们选择Hibernate作为JPA的提供商,所以需 ...

  10. 【春招】 java static 执行顺序

    package static类型.执行顺序; public class Test { Person person = new Person("Test"); static{ Sys ...