.clearfix:after {

    content: "";

    clear: both;

    visibility: hidden;

    display: block;

    height: 0px;

    font-size: 0px;

}

通常，我们增加一个div，然后使用clear:both清除。

上面这种方法更为简洁。在最后一个子元素上使用如上css即可！

以下css可以清除浮动的更多相关文章

  1. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  2. HTML&CSS基础-清除浮动

    HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...

  3. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  4. CSS clear清除浮动

    1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...

  5. 关于CSS中清除浮动的方法

    在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...

  6. div+css之清除浮动

    当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...

  7. CSS中清除浮动的作用以及如何清除浮动

    1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...

  8. CSS float清除浮动

    解决高度塌陷的问题 – 清除浮动 CSS中有个讨论较多的话题就是如何清除浮动,清除浮动其实就一个目的,就是解决高度塌陷的问题.为什么会高度塌陷?什么时候会高度塌陷?塌陷原因是:元素含有浮动属性 – 破 ...

  9. 【css】清除浮动（clearfix 和 clear）的用法

    本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...

  10. 【CSS】清除浮动的五种方式

    清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式 *首先要明确的是,为什么要清除浮动? A 影响其他元素定位 父盒子高度为0,子盒子全部浮动.定位,子盒子不会撑开父盒子,下面的元 ...

随机推荐

  1. POJ2635The Embarrassed Cryptographer（大数取余+素数筛选+好题）

    题目链接 题意:K是由两个素数乘积,如果最小的素数小于L,输出BAD最小的素数,否则输出GOOD 分析 素数打表将 L 大点的素数打出来,一定要比L大,然后就开始枚举,只需K对 素数 取余 看看是否为 ...

  2. 无法加载协定为xx的终结点配置部分，因为找到了该协定的多个终结点配置。请按名称指示首选的终结点配置部分。

    当在vs 2008中添加服务引用后,如果"更新"服务引用,或"删除"该服务引用后再次加入后,在运行时会出现此错误.这是因为在"更新/删除"服 ...

  3. oneM2M启动Release 3标准化，华为引领物联网技术布局

    http://developer.huawei.com/cn/ict/news/cn/2016/06/onem2m [韩国,首尔,2016年6月] 国际权威的物联网组织oneM2M召开第23次技术全会 ...

  4. php 简单分页类

    /**  file: page.class.php   完美分页类 Page  */ class Page {  private $total;          //数据表中总记录数  privat ...

  5. join的理解

    thread.Join把指定的线程加入到当前线程,可以将两个交替执行的线程合并为顺序执行的线程.比如在线程B中调用了线程A的Join()方法,直到线程A执行完毕后,才会继续执行线程B. t.join( ...

  6. asp.net js 倒计时总秒数量 和 排序

    Edit in JSFiddle JavaScript HTML CSS Result h1 { font-family: "微软雅黑"; font-size: 40px; mar ...

  7. C#------EntityFramework实体加载数据库SQLServer(MySQL)

    一.SQLServer数据库创建表Company,包含ID,CName,IsEnabled三列 二.(1)VS新建一个DXApplication工程,名为CompanyManageSystem (2) ...

  8. 自然语言17_Chinking with NLTK

    https://www.pythonprogramming.net/chinking-nltk-tutorial/?completed=/chunking-nltk-tutorial/ 代码 # -* ...

  9. 10月21日下午PHP常用函数

    函数四要素:返回类型  函数名  参数列表  函数体 //最简单的函数定义方式 function Show() { echo "hello"; } Show();//输出结果为he ...

  10. JStorm集群的安装和使用

    0 JStorm概述 JStorm是一个分布式的实时计算引擎.从应用的角度,JStorm应用是一种遵守某种编程规范的分布式应用:从系统角度, JStorm是一套类似MapReduce的调度系统: 从数 ...