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

 .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. PostgreSQL没有认证密码就登陆了缘由

    上午同事爆出这样的问题,使用正确的用户名和错误的密码连接了postgresql数据库,竟然连上了.这不是故意这样神操作,不小心密码写错了,咋一看这样怎么能行,随便输入一个密码都能登陆上.自己测试也是同 ...

  2. C#可空类型知多少

    在项目中我们经常会遇到可为空类型,那么到底什么是可为空类型呢?下面我们将从4个方面为大家剖析. 1.可空类型基础知识 顾名思义,可空类型指的就是某个对象类型可以为空,同时也是System.Nullab ...

  3. 《数字信号处理》课程实验2 – FIR数字滤波器设计

    一.FIR数字滤波器设计原理  本实验采用窗函数法设计FIR数字低通滤波器.我们希望设计的滤波器系统函数如下: \(H_{d}\left( e^{jw} \right) = \left\{ \begi ...

  4. web前端——美化效果总结

    概述 项目开发过程中使用到了不少web前端美化效果的方法,总结一下 1 图片作为背景 要实现的效果是,任意一张图片"img-page-background.png",不需要调整图片 ...

  5. 使用纯粹的JS构建 Web Component

    原文链接:https://ayushgp.github.io/htm...译者:阿里云 - 也树 Web Component 出现有一阵子了. Google 费了很大力气去推动它更广泛的应用,但是除 ...

  6. LeetCode 154.Find Minimum in Rotated Sorted Array II(H)(P)

    题目: Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. ( ...

  7. Service Mesh - gRPC 本地联调远程服务

    Description Service Mesh 架构下,服务间调用会通过服务名(Service Name)互相调用,比如在 Kubernetes .Docker Swarm 集群中,服务 IP 均由 ...

  8. BTrace实战

    BTrace在解决现场问题的时候非常有用. 1.概述 1.1下载 https://github.com/btraceio/btrace,最新版本是1.3.9 目前1.3.x系列最低支持JDK1.7,要 ...

  9. SpringBoot1.5.10.RELEASE整合druid时，在druid monitor界面出现(*) property for user to setup

    接上篇随笔,配置druid之后出现的错误,解决方法如下: @Bean(destroyMethod = "close",initMethod = "init") ...

  10. Lambda 方法引用

    1.方法引用:若Lambda 体中的内容有方法已经实现了,我们可以使用“引用方法”(可以理解为方法引用是Lambda表达式的另外一种表现形式) 方法引用主要有三种语法格式: ①  对象 :: 实例方法 ...