上篇文章是利用 :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. 旧文备份:在CANopen网络中通过LSS服务设置节点地址和网络波特率

    CANopen专有个子协议用来描述怎样去通过网络设置节点地址和波特率,就是CiA DSP-305,大伙都叫LSS协议,是Layer Setting Services的缩写,不太好翻译,可以叫底层设置服 ...

  2. rnn,cnn

    http://nikhilbuduma.com/2015/01/11/a-deep-dive-into-recurrent-neural-networks/ 按照这里的介绍,目前比较火的cnn是fee ...

  3. 洛谷P1829 [国家集训队]Crash的数字表格 / JZPTAB(莫比乌斯反演)

    题目背景 提示:原 P1829 半数集问题 已经迁移至 P1028 数的计算 题目描述 今天的数学课上,Crash小朋友学习了最小公倍数(Least Common Multiple).对于两个正整数a ...

  4. 在 publicId 和 systemId 之间需要有空格。

    spring  applicationContext_datasource.xml中约束错误 org.springframework.beans.factory.xml.XmlBeanDefiniti ...

  5. PXE自动化安装CentOS6/7

    服务器为centos7 安装前准备:关闭防火墙和SELINUX 虚拟机准备第二块网卡,设置主机模式,关闭虚拟机网络配置中主机模式的DHCP功能,并设置静态IP nmcli c a con-name e ...

  6. java后台poi根据模板导出excel

    public class ExcelUtils { private static final String INSPECTIONRECORD_SURFACE_TEMPLET_PATH = " ...

  7. Cloudera Manager 安装 CDH5

    文档说明 本文是针对Linux CentOS6服务器与CDH5.15的安装手册. 关于CDH和ClouderaManager CDH(Cloudera's Distribution, includin ...

  8. 【CodeBase】PHP将数组键名转成变量名

    <?php /** * php 把数组中的键名所为变量名键值作为变量名 */ $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>5,'e'=> ...

  9. php面向对象(2)值传递

    PHP中值传递方式,2中 值传递:传递的时候,拷贝的是数据本身.默认都是值传递 结果:传递完成,有了2份同样的数据,且2个变量“相互独立”,不会相互影响 引用传递:传递的时候,拷贝的是引用关系(数据的 ...

  10. No module named 'PyQt5.sip'

    使用pyinstaller打包python文件为windows可执行程序可能遇到的问题 pyinstaller yourprogram.py打包的程序双击打开一闪而过,提示上面标题的错误 把pycom ...