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

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

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

相信用过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. APP H5 混合自动化使用说明 [基于 Appium+Python 系列]

    背景 前几天接到H5开发人员那边的业务开发需求单,说想将H5接入到自动化系列中,特此记录分享一下. 环境前置准备 手机与电脑USB连接,开启USB调试模式,通过adb devices可查看到此设备. ...

  2. 使用Task的一些知识优化了一下同事的多线程协作取消的一串代码

    最近在看一个同事的代码,代码的本意是在main方法中开启10个线程,用这10个线程来处理一批业务逻辑,在某一时刻当你命令console退出的时候,这个 时候不是立即让console退出,而是需要等待1 ...

  3. js中页面刷新和页面跳转的方法总结 [ 转自欢醉同学 ]

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  4. HTML5学习笔记<三>: HTML5样式, 连接和表格

    HTML样式 1, 标签: <style>: 样式定义 <link>: 资源引用 2. 属性: rel="stylesheet": 外部样式表 type=& ...

  5. Octave Tutorial(《Machine Learning》)之第一课《数据表示和存储》

    Octave Tutorial 第一课 Computation&Operation 数据表示和存储 1.简单的四则运算,布尔运算,赋值运算(a && b,a || b,xor( ...

  6. Office 365 开发概览系列文章和教程

    Office 365 开发概览系列文章和教程 原文于2017年2月26日首发于LinkedIn,请参考链接 引子 之前我在Office 365技术社群(O萌)中跟大家提到,3月初适逢Visual St ...

  7. 菜鸟笔记:node.js+mysql中将JSON数据构建为树(递归制作树状菜单数据接口)

    初学Web端开发,今天是第一次将所学做随笔记录,肯定存在多处欠妥,望大家海涵:若有不足,望大家批评指正. 进实验室后分配到的第一个项目,需要制作一个不确定层级树形菜单的数据接口,对于从来没实战编过程的 ...

  8. Java线程池使用和分析(一)

    线程池是可以控制线程创建.释放,并通过某种策略尝试复用线程去执行任务的一种管理框架,从而实现线程资源与任务之间的一种平衡. 以下分析基于 JDK1.7 以下是本文的目录大纲: 一.线程池架构 二.Th ...

  9. 【G】开源的分布式部署解决方案文档 - 使用手册

    G.系列导航 [G]开源的分布式部署解决方案 - 导航 已知问题 导航没有联动 因为权限只是做了基础的登录校验,考虑到后面导航要跟权限关联上暂时是写死的. 只有部分界面使用了Vue.js 因为刚开始没 ...

  10. Linux之cut命令

    cut 参数: -d  指定分隔符,与-f 一起使用,默认是空格.例如:-d“|” -f  指定取第几段的数据与-d一起使用 -c  以字符为单位取出固定字符区间 示例: 取不连续区间的内容的时候使用 ...