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

 .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. 【Java】macOS下编译JDK8

    安装mercurial brew install mercurial 下载源码 1234 hg clone http://hg.openjdk.java.net/jdk8/jdk8 java-sour ...

  2. How to Write a README on GitHub

    最近在寫 GitHub 上的 README,發現這個東西好像每個人的寫法都不太一樣,於是稍微整理了一下自己覺得大概要包含哪些內容. Motivation 顧名思義就是簡介一下為什麼會有這個專案,以及這 ...

  3. C++走向远洋——31（六周，项目一，1.1）

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:fenshu.cpp * 作者:常轩 * 微信公众号:World ...

  4. redis BLPOP

    一.需求 redis中保存了需要download的image url,存储格式为列表. 我需要从列表中获取数据,将图片下载保存到本地. 列表中的数据是一直增加的. 二.实现 使用redis BLPOP ...

  5. OCR场景文本识别：文字检测+文字识别

    一. 应用背景 OCR(Optical Character Recognition)文字识别技术的应用领域主要包括:证件识别.车牌识别.智慧医疗.pdf文档转换为Word.拍照识别.截图识别.网络图片 ...

  6. display的block、none、inline属性及解释

    常会用到display对应值有block.none.inline这三个值 参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility ...

  7. Swfit 属性与汇编分析inout本质

    今天将讲述Swift属性以及剖析inout的本质, 如有兴趣可点击关注,以后会定期更新更有料的博客!!! 一.属性 Swift中跟实例相关的属性可以分为2大类 存储属性(Stored property ...

  8. 前端劝退预警：JavaScript 工具链不完全指南

    经过这么多年的发展,JavaScript 早已经不是当年那个不太起眼的脚本语言.如今的 JavaScript 可以说是风光无限,在 Web 前端.移动端.服务端甚至物联网设备上都大展身手,到处都有它的 ...

  9. 10个机器学习人工智能开发框架和AI库（优缺点对比表）/贪心学院

    概述 通过本文我们来一起看一些用于人工智能的高质量AI库,它们的优点和缺点,以及它们的一些特点. 人工智能(AI)已经存在很长时间了.然而,由于这一领域的巨大进步,近年来它已成为一个流行语.人工智能曾 ...

  10. c:\Windows\system32\rundll32.exe Windows无法访问指定设备、路径或文件，你可能没有适当的权限访问该项目

    非常懂如何修改权限的可以尝试,否则老老实实地重新注册的系统的.dll文件 重新注册方法如下: WIN+R下输入命令: cmd /c for %i in (%windir%\system32\*.dll ...