清除浮动有很多种?那么你们知道现在最常用的是哪一种呢?

在企业开发中,利用伪元素清除浮动是最佳选择之一。

那么,什么是利用伪元素清除浮动呢?

相信用过Bootstrap框架开发过项目的人都知道,废话不多说,直接上代码。

 .container:before,
.container:after {
display: table;
content: " ";
}
.container:after {
clear: both;
}

把产生的伪元素的display设置为table,这时候一个新的匿名的BFC(块级格式化上下文)和table-cell被创建,:before伪元素的作用是防止上边距崩塌,:after 伪元素清除浮动。

就是这么简单,赶快用起来吧

Css清除浮动最优方式之一的更多相关文章

  1. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  2. 什么是CSS清除浮动?

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

  3. 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  4. css清除浮动float方法

    转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...

  5. css清除浮动float的几种方法

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...

  6. CSS清除浮动方法总结

    什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高 ...

  7. 前端开发CSS清除浮动的方法有哪些?

    在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...

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

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

  9. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

随机推荐

  1. 本地计算机上的XXX服务启动后停止,某些服务在未由其它服务或程序使用时将自动停止

    创建WindowsService,以及安装和卸载网上的资料一搜一大堆,在这里就不再做演示,只说明下博主在工作中使用WindowsService服务出现的错误,以及最终的结局方案. 1.启动window ...

  2. DOM基础(一)

    在我们刚刚学JavaScript的时候,就应该听说过,JavaScript是由三部分组成的.分别是ECMAScript,DOM和BOM组成的.ECMAScript是JavaScript的核心,它描述了 ...

  3. webots自学笔记(二)节点与机器人建模

    原创文章,出自"博客园, _阿龙clliu" :http://www.cnblogs.com/clliu/ 上一次介绍了界面和一个简单的自由落体,然而在实际运用中,机器人的结构都是 ...

  4. python中try except处理程序异常的三种常用方法

    如果你在写python程序时遇到异常后想进行如下处理的话,一般用try来处理异常,假设有下面的一段程序: try: 语句1 语句2 . . 语句N except .........: do somet ...

  5. Eclipse使用Maven创建Web项目+整合SSM框架

    一.准备环境: maven:apache-maven-3.2.3 jdk:jdk1.8.0_25 tomcat:tomcat-9.0 二.配置Maven.jdk 1.Window——>Prefe ...

  6. 制作流程图,activity,好不容易找到的

    Star UML指导手册 Module by: Stephen Wong 原著:Stephen Wong            翻译:火猴 1.   综述:http://pan.baidu.com/s ...

  7. shp文件的读取

    http://blog.csdn.net/q_l_s/article/details/41486813

  8. Python中的日期和时间

    感觉C语言作为一门编程的入门语言还是很好的,相比较之下,Python为代表的一些语言,适合很多非计算机专业的编程入门学习. Python 日期和时间 Python 程序能用很多方式处理日期和时间,转换 ...

  9. [原创]ASM动态修改JAVA函数之函数字节码初探

    ASM是非常强大的JAVA字节码生成和修改工具,具有性能优异.文档齐全.比较易用等优点.官方网站:http://asm.ow2.org/ 要想熟练的使用ASM,需要对java字节码有一定的了解,本文重 ...

  10. HTML阶段总结

    自学有两个多星期了,这段时间主要在学习HTML基础知识,万事开头难,刚开始根本没法上手,云里雾里的,没有清晰的思路和详细的学习计划.问了一些盆友,找了一些资料,找到了适合自己的学习方法,渐渐的进入了轨 ...