最理想的方式为

伪类 + 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. openjpa框架入门_项目框架搭建(二)

    Openjpa2.2+Mysql+Maven+Servlet+JSP 首先说明几点,让大家更清楚整体结构: 官方source code 下载:http://openjpa.apache.org/dow ...

  2. Android混淆、反编译以及反破解的简单回顾

    =========================================================================虽然反编译很简单,也没下面说的那么复杂,不过还是转了过 ...

  3. 标头“Vary:Accept-Encoding”指定方法及其重要性分析

    原文地址:http://www.webkaka.com/blog/archives/how-to-set-Vary-Accept-Encoding-header.html 在webkaka的网站速度诊 ...

  4. 弗洛伊德(Floyd)算法

    #include <stdio.h> #define MAXVEX 20 //最大顶点数 #define INFINITY 65535 //∞ typedef struct {/* 图结构 ...

  5. Linux学习之十二、命令别名与历史命令

    命令别名配置: alias, unalias 那么需要下达『 ls -al | more 』这个命令,我是觉得很烦啦! 要输入好几个单字!那可不可以使用 lm 来简化呢?当然可以,你可以在命令行下面下 ...

  6. GDI编程小结

    图形设备接口(GDI)是一个可运行程序,它接受Windows应用程序的画图请求(表现为GDI函数调用),并将它们传给对应的设备驱动程序,完毕特定于硬件的输出,象打印机输出和屏幕输出.GDI负责Wind ...

  7. 响应式内容滑动插件bxSlider

    bxSlider特性 1.充分响应各种设备,适应各种屏幕: 2.支持多种滑动模式,水平.垂直以及淡入淡出效果: 3.支持图片.视频以及任意html内容: 4.支持触摸滑动: 5.支持Firefox,C ...

  8. 当MVC4无法跳转时

    //RedirectToAction("Index","首页"); //return View("首页/Index"); //Redirec ...

  9. 对浏览器css兼容性的学习理解及问题解决汇总

    一.从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类: 1. 渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2. 脚本相关:和脚本相关的问题,包括JavaScript和DOM.BOM ...

  10. 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器

    这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器,需要的朋友可以参考下.希望对大家有所帮助   Firefox 和 IE 的浏览器各自实现了input历史记录的功能 ...