.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. maven的环境搭建

    maven环境快速搭建 最近,开发中要用到maven,所以对maven进行了简单的学习. .关于maven是什么东东,请参考其它文章. ----------------准备工作------------ ...

  2. NSFileManager（沙盒文件管理）数据持久化 <序列化与反序列化>

    iOS应用程序只能在为该改程序创建的文件中读取文件,不可以去其它地方访问,此区域被成为沙盒,所以所有的非代码文件都要保存在此,例如图像,图标,声音,映像,属性列表,文本文件等.       默认情况下 ...

  3. glade2支持C++代码的输出(3)

    今天完成了glade-2生成configure.ac/Makefile.am等调整 代码为:cpp_out_4.patch.zip BaseObject类也做了一些小的调整:BaseObject.00 ...

  4. JavaScript 、jQuery动态创建元素的关键字~

    JavaScript动态创建元素: 1.创建元素  如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...

  5. JavaWeb学习笔记——表达式语言

    使用表达式语言,可以方便地访问标志位(JSP中有page(pageContext).request.session和application4种标志位)中的属性内容,可以避免出现许多的Scriptlet ...

  6. CSS 中背景图片定位方法

    三种: 关键字:background-position: top left; 像素:background-position: 0px 0px; 百分比:background-position: 0% ...

  7. 关于Linux发行版的选择

    Linux发行版很多,分为以RedHat为代表的商业发行版和以Debian为代表的免费发行版.前者典型版本有CentOS.Fedora.SUSE等,后者的典型版本有Ubuntu等 CentOS.Ubu ...

  8. js正则,电话，邮箱

    1. <script type="text/javascript"> var str="Is this all th05777-89856825ere is5 ...

  9. mysql Table 'performance_schema.session_variables' doesn't exist

    CMD  进入MYSQL的安装目录..Bin 下 执行 mysql_upgrade -u root -p --force 输入密码..然后等待一会儿..会跑一些东西..然后重启服务

  10. css sprite

    1.What? CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“backgrou ...