更优雅的清除浮动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.出现浮动后,如何清除浮 ...
随机推荐
- Python 创建项目、应用
1.创建项目 django-admin startproject TestPython 2.创建应用 python3 manage.py startapp books 3.目录讲解 ├── TestP ...
- 第34-1题:LeetCode112. Path Sum I
题目 给定一个二叉树和一个目标和,判断该树中是否存在根节点到叶子节点的路径,这条路径上所有节点值相加等于目标和. 说明: 叶子节点是指没有子节点的节点. 示例: 给定如下二叉树,以及目标和 sum ...
- angularjs处理多个$http
本文引自:https://www.cnblogs.com/xiaojikuaipao/p/6017899.html 在实际业务中经常需要等待几个请求完成后再进行下一步操作.但angularjs中$ht ...
- 第4章 HDFS操作
目录 4.1 命令行操作 4.2 Java API操作 4.2.1 创建Java工程 4.2.2 读取数据 4.2.3 创建目录 4.2.4 创建文件 4.2.5 删除文件 4.2.6 遍历文件和目录 ...
- 解决win10子系统Ubuntu新装的mysql 不能root登陆方法
步骤一:打开终端 $sudo /etc/init.d/mysql stop $sudo mkdir -p /var/run/mysqld $sudo chown mysql:mysql /var/ru ...
- Mplab X IDE 安装DMCI
DMCI在Mplab 8中是默认安装的,在 Mplab X IDE中是作为插件,默认不安装. 找到 勾选前面的复选框,点击安装
- Sqoop 工具使用
Sqoop 是什么及安装 Hadoop sqoop Apache sqoop (SQL to Hadoop) Sqoop is a tool designed to transfer data bet ...
- 模块hashlib和logging
Python的hashlib提供了常见的摘要算法MD5. 我们以常见的摘要算法MD5为例,计算出一个字符串的MD5值: import hashlib md5=hashlib.md5() md5.upd ...
- SpringMVC---web.xml配置详解
web.xml中需要配置的内容 1.配置监听器<listener> 它有两个监听器: 1). <!--配置文件加载监听器--> <listener> <lis ...
- mysql安装与基本管理,mysql密码破解
一.MySQL介绍 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面MySQL是 ...