上篇文章是利用 :after 方法清除浮动float(作用于浮动元素的父元素上)。

.outer { zoom:; } //为了兼容性,因为ie6/7不能使用伪类,所以加上此行代码。
.outer:after { clear:both;content:'';display:block;width:;height:;visibility:hidden; }

现在可以改写成更优雅的代码:

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

更优雅的清除浮动float方法的更多相关文章

  1. css清除浮动float方法

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

  2. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

  3. 彻底理解浮动float CSS浮动详解 清除浮动的方法

    我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 ...

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

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

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

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

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

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

  7. 8种CSS清除浮动的方法优缺点分析

    为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...

  8. css清除浮动的方法总结

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下     清除浮动是每一个 we ...

  9. 详细解读css中的浮动以及清除浮动的方法

    对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读:   1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...

随机推荐

  1. JSP自定义标记

    JSP自定义标记(可以使JSP网页变得简洁并且易于维护) 一.自定义标记的方式 1.实现接口Tag 2.继承类TagSupport或BodyTagSupport   二.JSP自定义标记的生命周期 1 ...

  2. SpringBoot学习9:springboot整合thymeleaf

    1.创建maven项目,添加项目所需依赖 <!--springboot项目依赖的父项目--> <parent> <groupId>org.springframewo ...

  3. 爬虫学习(十九)——Scrapy的学习及其使用

    Scrapy框架的介绍 Scrapy,非常的强悍,通过python语言编写的,非常知名的爬虫框架 框架工作流程 框架流程图 基本工作流程; 1.引擎向spiders要url 2.引擎将要爬取的url给 ...

  4. docker简介以及优缺点

    1.docker简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制, ...

  5. Guava Cache 工具类 [ GuavaCacheUtil ]

    pom.xml <dependency> <groupId>com.google.guava</groupId> <artifactId>guava&l ...

  6. 关于IT人的一些消遣区

    https://www.csdn.net/http://www.51cto.com/http://bestcbooks.com/http://www.jobbole.com/http://www.co ...

  7. linux 安装mysql5.6 yum

    安装mysql: 查看mysql: rpm -qa | grep -i mysql 安装必要的环境 yum -y install gcc gcc-c++ ncurses-devel perl 查看环境 ...

  8. 【机器学习算法基础+实战系列】KNN算法

    k 近邻法(K-nearest neighbor)是一种基本的分类方法 基本思路: 给定一个训练数据集,对于新的输入实例,在训练数据集中找到与该实例最邻近的k个实例,这k个实例多数属于某个类别,就把输 ...

  9. Gson杂记录

    //Integer userId = getUserId(); //System.out.println("userId:"+userId); /*for(int i=0;i< ...

  10. win8电脑字体出现方格的解决方法

    一般电脑出现乱码有几种可能,最常见的可能就是电脑字体的丢失,其次就是电脑字体被病毒所损坏,因此,首先我们要做的就是下载字体并进行安装. 下载 simsun.tcc点击安装,如果电脑字体依然是这种情况( ...