上篇文章是利用 :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. JS基础——JavaScript原型和原型链及实际应用

    构造函数 function Stu(name,age){ this.name=name; this.age=age; } instanceof 查看引用类型对象是属于哪个构造函数的方法,通过__pro ...

  2. spring-开发需要jar包

    需要的开发包 Spring核心开发包: Commons-logging.jar Spring-beans.jar Spring-context.jar Spring-core.jar Spring-e ...

  3. java高并发之CountDownLatch,CyclicBarrier和join

    晚上打车回家,在车上看到一篇文章<22岁大学生获谷歌天价Offer,年薪千万!>,讲的是印度一个22岁大学生多次参加ACM大赛,开源多个项目,以非常牛逼的履历通过了谷歌的AI测试,斩获谷歌 ...

  4. 常见Linux的发行版有哪些?并描述不同发行版之间的联系与区别。

    一.按系列罗列linux的发行版,并描述不同发行版之间的联系和区别 Linux发行版=Linux内核+商业软件 linux的发行版: RedHat.Fedora.suse.红旗.debian.Ubun ...

  5. MUI常用脚本及原生JavaScript常用操作元素方法

    1.mui元素转换html元素 var obj=mui("#id")[0]; 2.事件绑定 var btn = document.getElementById("logi ...

  6. python之获取微信好友列表并保存文档中

    代码如下 from wxpy import * from pprint import pprint #登录微信 bot = Bot() my_friend = bot.friends() f = op ...

  7. python web框架的介绍

    随着互联网的兴起,web开发变得愈发的重要.Python作为当前火热的语言, 其中的web开发框架可以说是百花齐放,下面聊一聊这些框架. 一: 基于Python的代表性Web框架 Django Dja ...

  8. Small Talk Matters【闲谈很重要】

    Small Talk Matters We' ve all been there: in a lift, in line at the bank or on an airplane, 我们都有过这样的 ...

  9. 查找并绘制轮廓 opencv

    findContours(): 第二个参数为一个检测到的轮廓,函数调用后的运算结果都放在这里,每个轮廓存储为1个点向量,用point类型的vector表示. 第三个参数表示轮廓数量,包含了许多元素.每 ...

  10. 小白日记54:kali渗透测试之Web渗透-补充概念(AJAX,WEB Service)

    补充概念 AJAX(异步javascript和XML) Asynchronous javascript and xml 是一个概念,而非一种新的编程语言,是一组现有技术的组合 通过客户端脚本动态更新页 ...