上篇文章是利用 :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. SpringBoot学习9:springboot整合thymeleaf

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

  2. 制作linux系统U盘并使用U盘安装CentOS7.6系统

    目录   一.制作linux启动盘     1.1. 准备工作     1.2. 制作linux系统U盘   二.使用U盘安装Centos7.6     2.1. 使用U盘启动     2.2. 更改 ...

  3. C#基础-面向对象-多态

    多态,不同对象对同一方法的不同实现 使用abstract关键字表示抽象类 // 表示是一个抽象类 public abstract class Animal { private string name; ...

  4. ethereum(以太坊)(十三)--异常处理/元祖

    pragma solidity ^0.4.4; contract Students{ uint[] data= new uint[](4); address _owner = msg.sender; ...

  5. python--Wrapper

    然后给大家介绍的是Wrapper(装饰器),使用广泛.python笔试,面试的话也会百分百问到的,基础和中级的知识储备还是必用的. 让我们开始. 先来一些基础相关知识 *args,**kwargs的区 ...

  6. InteliJ IDEA 设置eclipse快捷键

    从使用eclipse切换到intellij idea开发工具常常会伴随这快捷切换的困扰,今天写到将intellij idea快捷键设置为eclipse快捷的方式 步骤如下: file -> se ...

  7. 插入排序算法Java实现

    一. 算法描述 插入即表示将一个新的数据插入到一个有序数组中,并继续保持有序.例如有一个长度为N的无序数组,进行N-1次的插入即能完成排序:第一次,数组第1个数认为是有序的数组,将数组第二个元素插入仅 ...

  8. PAT (Basic Level) Practice 1006 换个格式输出整数

    个人练习 让我们用字母B来表示“百”.字母S表示“十”,用“12...n”来表示个位数字n(&lt10),换个格式来输出任一个不超过3位的正整数.例如234应该被输出为BBSSS1234,因为 ...

  9. G - Dreamoon and NightMarket Gym - 101234G 优先队列+思路

    题目:题目链接 题意:给出n种食物,食物有自己的价格并且可以自由搭配,每天吃之前没吃过的花费最少的搭配,问第k天的花费. 思路:第k小我们考虑用优先队列处理,虽然n比较大,但由于1 ≤ K ≤ min ...

  10. [Luogu1341]无序字母对(欧拉回路)

    按题意给定字符串建无向图,找欧拉回路 按照定义,当没有奇数度点或者只有2个奇数度点时才有欧拉回路 Code #include <cstdio> #include <algorithm ...