最理想的方式为

伪类 + content ：

　　例如 div：after{content:"";display:block;clear:both;}

　　　　div{zoom：1;}

另外，还有一些其他方式，但存在兼容性问题或不利于扩展

2.加高 扩展性不好

3.给父级加浮动，则需要给父级，再往上推找父级都加上浮动，不但繁琐，而且会导致margin左右auto失效；

4.空标签 或 br+clear：all的方式需要额外添加标签

5.voerflow:hidden;并配合zoom=1以兼容ie6&7 , 存在的问题

web - 清除浮动的更多相关文章

  1. 第五篇：web之前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式   前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.flo ...

  2. [Web 前端] 018 css 清除浮动的四种方法

    清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...

  3. 【Web】网页清除浮动的方法

    网页中,经常用浮动的div来布局,但是会出现父元素因为子元素浮动引起内部高度为0的问题,为了解决这个问题,我们需要清除浮动,下面介绍4中清除浮动的方法. 在CSS中,clear属性用户清除浮动,语法: ...

  4. [Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

    cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...

  5. WEB学习-CSS清除浮动

    浮动的清除 来看一个实验:现在有两个div,div身上没有任何属性.每个div中都有li,这些li都是浮动的. <div> <ul> <li>HTML</li ...

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

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

  7. CSS清除浮动八种方法

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

  8. css清除浮动方法大全

    清除浮动这个问题,做前端的应该再熟悉不过了,也是每一个web前台设计师 必须掌握的机能. 为什么浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width ...

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

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

随机推荐

  1. vs2008 + OpenCV-2.1.0-win32-vs2008安装

    vs2008 + OpenCV-2.1.0-win32-vs2008安装 1. 安装vs2008+sp12. 安装opencv-2.1.0-win32-vs2008,假设安装目录为c:/opencv2 ...

  2. Udacity-Artificial Intelligence for Robotics 课程笔记

    Lesson 1 Localization 蒙特卡洛机器人定位模型 sense 贝叶斯模型 move 全概率公式 localization练习 # The function localize take ...

  3. ubuntu14.04 qt4开发环境搭建(vnc use gnome)

    1,安装qt开发环境软件包:apt-get install qt4-dev-tools qt4-doc qt4-qtconfig qt4-demos qt4-designer qtcreator; 2 ...

  4. Spring、Spring事务详解；使用XML配置事务

    @Transactional可以设置以下参数: @Transactional(readOnly=false) // 指定事务是否只读的 true/false @Transactional(rollba ...

  5. 自学php的几个例子（包含AMP（Apache、MySQL、PHP）环境搭建链接）

    学习PHP之前需要先搭建PHP运行的环境(即服务器+PHP+数据库)来使PHP成功运行,具体环境搭建教程可参考pharen(http://www.cnblogs.com/pharen/archive/ ...

  6. html系列教程--文本格式化

    <b>定义粗体文本</b> <br /> <strong>定义加重语气</strong> <br /> <big>定 ...

  7. input模糊搜索功能

    <!doctype html> <meta charset="utf-8"> <style type="text/css"> ...

  8. 漫谈servlet技术

    1.要谈到Servlet技术,不得不先谈谈动态网页的概念. 编写过网页的人都知道,浏览器能够根据HTML静态标记语言来显示各式各样的网页.但是如果我们需要在网页上完成一些业务逻辑:比如登陆验证.或者说 ...

  9. JS函数作用域及作用域链理解

    从事web开发工作,尤其主要是做服务器端开发的,难免会对客户端语言JavaScript一些概念有些似懂非懂的,甚至仅停留在实现功能的层面上,接下来的文章,是记录我对JavaScript的一些概念的理解 ...

  10. TCP为什么需要3次握手与4次挥手

    为什么需要“三次握手” 在谢希仁著<计算机网络>第四版中讲“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误”.在另一部经典的<计算机网络> ...