更优雅的清除浮动float方法
上篇文章是利用 :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方法的更多相关文章
- css清除浮动float方法
转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...
- CSS清除浮动float方法总结
使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
- 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- css清除浮动float的几种方法
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...
- css清除浮动的方法汇总
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
- 8种CSS清除浮动的方法优缺点分析
为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...
- css清除浮动的方法总结
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 we ...
- 详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...
随机推荐
- 楔积(Wedge Procut)
原文链接 由拓扑学中表面(Surface)的定义及实例引入楔积的概念. 基础知识 先看Surface在欧几里得空间内的定义: 所有在Omega中的点w(参数空间中的点)被记作: 对应在R3中(欧几里德 ...
- 第13章 GPIO-位带操作—零死角玩转STM32-F429系列
第13章 GPIO—位带操作 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fire ...
- ADO.net中常用的对象有哪些?
ADO.net中常用的对象有哪些?分别描述一下. 答:Connection 数据库连接对像 Command 数据库命令 DataReader 数据读取器 DataSet 数据集 DataReader与 ...
- 【ODT】cf896C - Willem, Chtholly and Seniorious
仿佛没用过std::set Seniorious has n pieces of talisman. Willem puts them in a line, the i-th of which is ...
- java通过FreeMarker模板生成Excel文件之.ftl模板制作
关于怎么通过freemarker模板生成excel的文章很多,关键点在于怎么制作模板文件.ftl 网上的办法是: (1)把Excel模板的格式调好,另存为xml文件 (2)新建一个.ftl文件,把xm ...
- 深入理解java虚拟机学习笔记(一)JVM内存模型
上周末搬家后,家里的宽带一直没弄好,跟电信客服反映了N遍了终于约了个师傅明天早上来迁移宽带,可以结束一个多星期没网的痛苦日子了.这段时间也是各种忙,都一个星期没更新博客了,再不写之前那种状态和激情都要 ...
- 协程实现tcp两个客户端的通讯
import socket import gevent from gevent import monkey monkey.patch_all() def cb_work(recv_num,send_n ...
- python实现简单分类knn算法
原理:计算当前点(无label,一般为测试集)和其他每个点(有label,一般为训练集)的距离并升序排序,选取k个最小距离的点,根据这k个点对应的类别进行投票,票数最多的类别的即为该点所对应的类别.代 ...
- 转:2018最全Redis面试题整理
Java面试----2018最全Redis面试题整理 1.什么是Redis? 答:Redis全称为:Remote Dictionary Server(远程数据服务),是一个基于内存的高性能key-va ...
- JavaScript---DOM对象(DHTML)
1.什么是DOM? DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本 ...