清除float浮动三种方式
Float的作用？
w3c的官方解释：
Content flows down the right side of a left-floated box and down the left side of a right-floated box … Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.
看一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
.parent {
background: blue;
height: 400px;
color: white;
font-family: Arial, sans-serif;
} .child1 {
width: 30px;
height: 30px;
background: red;
float: left;
} .child2 {
background: green;
height: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2">This text flows around the red box. The green box that holds the text doesn't.</div>
</div>
</body>
</html>
效果如下：
注意到绿色的box表现的就像红色的box根本不存在一样，但是白色的文字却“浮动”在红色box周围。
这就是float做的事情：它们导致其他的浮动元素和inline内容浮动在它们周围，但是其他block box却完全不理会float。
w3c的定义就像是在描述绝对定位元素一样，我更加倾向于将float描述成float是脱离正常流(normal flow)且和兄弟block元素相关的。
不管怎样解释，你应该知道不论浏览器怎样先进，它们永远不会自动的清除浮动——因为float的行为不是一个bug，而是特点。
清除浮动的方法
让我们先说主流的方法：
clear: both/left/right
除了“none”以外的任何属性值都将导致元素相应位置不允许浮动。
overflow: hidden/auto
float导致了元素坍塌，如果你想让父元素包含所有的float属性元素，那么考虑在父元素上使用overlow:hidden/auto
clearfix
最好的方法是使用clearfix属性，下面的代码适用到IE6。
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* For IE 6/7 only */
.clearfix {
*zoom:;
}
如果你想适应IE8及其以上的，只要
.clearfix:after {
content: "";
display: table;
clear: both;
}
你所要做的就是将clearfix类添加到包含floated的父元素上，你当然也可以使用overlow:hidden但是会导致很多布局上的其他问题。
清除float浮动三种方式的更多相关文章
- css清除浮动float的三种方法总结
原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...
- 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- HTML连载49-清除浮动的第三种方式（内外墙法）
一.清除浮动的第三种方式 1.隔墙法有两种如下:外墙法和内墙法. 2.外墙法 (1)在两个盒子中间添加一个额外的块级元素 (2)给这个额外添加的块级元素设置:clear:both;属性 注意点: ...
- python 全栈开发，Day94(Promise,箭头函数,Django REST framework,生成json数据三种方式,serializers,Postman使用,外部python脚本调用django)
昨日内容回顾 1. 内容回顾 1. VueX VueX分三部分 1. state 2. mutations 3. actions 存放数据 修改数据的唯一方式 异步操作 修改state中数据的步骤: ...
- HTML5实现动画三种方式
编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制 ...
- [转] Bound Service的三种方式（Binder、 Messenger、 AIDL）
首先要明白需要的情景,然后对三种方式进行选择: (一)可以接收Service的信息(获取Service中的方法),但不可以给Service发送信息 (二) 使用Messenger既可以接受Servic ...
- Java Class类以及获取Class实例的三种方式
T - 由此 Class 对象建模的类的类型.例如,String.class 的类型是Class<String>.如果将被建模的类未知,则使用Class<?>. publi ...
- 编写Unity3D着色器的三种方式
不管你会不会写Unity3D的shader,估计你会知道,Unity3D编写shader有三种方式,这篇东西主要就是说一下这三种东西有什么区别,和大概是怎样用的. 先来列一下这三种方式: fixed ...
- PHP中数据类型转换的三种方式
PHP中数据类型转换的三种方式 PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: 1.(int).(integer):转换成整形2.(float).(double).(real):转换成 ...
随机推荐
- JS门面模式
门面模式 前言 门面模式的本质是实现一个简单的同一接口来处理对各个子系统接口的处理和调用.和桥接模式不同的是:桥接模式中的各个类是全然独立的,桥接模式仅仅在必要的时候将这些类关联起来. 门面模式则有点 ...
- Build Your Hexo Blog (On Github)
超简单,比jekyll好多了! 看个Demo http://kevinjmh.github.io/ 了解Hexo Hexo是一个由Node.js驱动的,简单.快速.强大的Blog框架.可以快速的生成静 ...
- 1BIT,1BYTE,1KB,1MB,1GB,1TB等计量单位换算
http://iask.sina.com.cn/b/8961090.html知识 在数字世界里没有电影.没有杂志.没有一首首的乐曲,只有一个个的数字“1”和“0”.以前人们对于数字世界中的这两个数 ...
- OpenGL研究3.0 多边形区域填充
OpenGL研究3.0 多边形区域填充 DionysosLai(906391500@qq.com)2014-06-22 所谓多边形区域填充.就是将多边形内部区域,所有已相同色块填充.注意:这里讨论的多 ...
- SVN 等版本管理工具
程序猿团队开发代码,必须的程序版本管理工具 1.SVN使用教程总结 2.SVN如何切换用户 在使用svn更新或提交数据时需要输入用户名和密码,在输入框中可以选择是否记录,以便下次操作无需再次输入用户名 ...
- golang中并发sync和channel
golang中实现并发非常简单,只需在需要并发的函数前面添加关键字＂go",但是如何处理go并发机制中不同goroutine之间的同步与通信,golang 中提供了sync包和channel ...
- Mongodb亿级数据量的性能测试
进行了一下Mongodb亿级数据量的性能测试,分别测试如下几个项目: (所有插入都是单线程进行,所有读取都是多线程进行) 1) 普通插入性能 (插入的数据每条大约在1KB左右) 2) 批量插入性能 ...
- 22 nginx配置与集群
一:编译nginx ,并配置 Cd /app/pcre-8.12 ./configure Make && make install Cd nginx-1.2.7 ./configure ...
- 苹果开发之COCOA编程(第三版)下半部分
第十八章:Image和鼠标事件 1.NSResponderNSView继承自NSResponder类.所有的事件处理方法都定义在NSResponder类中.NSResponder申明了如下方法:- ( ...
- python 基础 3.1 打开文件 a a+ r+ w+ 详解
一.python 访问文件 1.在python中要访问文件,首先要打开文件,也就是open ---open r: 只读 w: 只写 ,文件已存在则清空,不存在则创建 a:追加 ...