最理想的方式为

伪类 + 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. VC维度

    ​由vc bound可以知道: $P(\exists h\in H~s.t~|E_{in}(h)-E_{out}(h)|>\epsilon)\\ \leq 4M_H(2N)exp(-\frac{ ...

  2. jsxtransformer.js 和browser.js有什么关系？

    这个确实是百度就能解决的问题 补充下楼上的回答在react 0.14前,浏览器端实现对jsx的编译依赖jsxtransformer.js 在react 0.14后,这个依赖的库改为browser.js ...

  3. list去重 转载

    http://blog.csdn.net/huaishuming/article/details/47778319 1. 单个List 去重: 如果用的是Set集合就不用怕重复的问题了,如果用的Lis ...

  4. Chrome 常用快捷键

    20160518     生活常识     Chrome常用操作快捷键 掌握Chrome的常用快捷键,不仅可以节约时间,还能够提高工作效率,最主要还可以装逼.以下是一些常用快捷键: 窗口操作快捷键: ...

  5. 指针和const

    将指针参数声明为指向常量数据的指针有两条理由: 这样可以避免由于无意间修改数据而导致的编译错误.      使用const使得函数能够处理const和非const实参,否则将只能接收非const数据. ...

  6. 利用汇编查看C++函数调用

    这篇文章的内容是一个老生常谈的问题----> 函数是如何被调用的. 本文用汇编代码研究函数调用的过程,参数调用的方式,函数值的返回. 1. 函数是如何实现调用的 函数的调用是用call 和 re ...

  7. 学习笔记（一） HTML+CSS基础课程

    这个周把慕课网的<HTML+CSS基础课程>课程学完,内容都是非常非常基础的,不过还是学到了几个小知识点,记下来先. <a>超链接发送邮件 直接上把他的图片给挪过来了,我就不打 ...

  8. HTTP协议中keep-alive

    一 . http协议是有连接的协议,这样每一个连接过来都要重新打开一个tcp的http socket,短期内同一个host 对服务器的请求就会很慢,若是能够保持住连接,就可以节省socket open ...

  9. css3中动画animation的应用

    <!DOCTYPE html> <html> <head> <style> /* @-webkit-keyframes anim1 { // 规定动画. ...

  10. Flink资料（3）-- Flink一般架构和处理模型

    Flink一般架构和处理模型 本文翻译自General Architecture and Process Model ----------------------------------------- ...