清除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):转换成 ...
随机推荐
- 总结自己使用shell命令行经常使用到的8个小技巧
原创blog,转载请注明出处 Shell是命令解释器 [root@localhost ~]# cat /etc/shells 查看本系统共支持哪些shell 1 tab 命令补全 这个差点儿每次都能用 ...
- (转)Spring对注解(Annotation)处理源码分析1——扫描和读取Bean定义
1.从Spring2.0以后的版本中,Spring也引入了基于注解(Annotation)方式的配置,注解(Annotation)是JDK1.5中引入的一个新特性,用于简化Bean的配置,某些场合可以 ...
- 3DES
3DES是继DESeasy被破解后的DES加密升级版,它属于对称加密. 可指定24位长度的密钥.在java API中也有事实上现,代码例如以下: /** * 3DES 的Java SDK API 实现 ...
- 【甘道夫】Ubuntu14 server + Hadoop2.2.0环境下Sqoop1.99.3部署记录
第一步.下载.解压.配置环境变量: 官网下载sqoop1.99.3 http://mirrors.cnnic.cn/apache/sqoop/1.99.3/ 将sqoop解压到目标文件夹,我的是 /h ...
- 开发ActiveX控件调用另一个ActiveX系列0——身份证识别仪驱动的问题
程序员要从0下表开始,这篇是介绍这个系列的背景的,没有兴趣的人可以直接跳过. 为什么要开发ActiveX控件 由于工作需要,我们开发了一个网站,使用了一款身份证识别仪的网页ActiveX(OCX)插件 ...
- caffe-ubuntu1604-gtx850m-i7-4710hq----bvlc_reference_caffenet.caffemodel
bvlc_reference_caffenet.caffemodel --- name: BAIR/BVLC CaffeNet Model caffemodel: bvlc_reference_caf ...
- 结缘mac
还记得上一次买MacBookPro.是在去年的7月下旬,记得那次是我大学第一次买电脑,那时候刚准备開始研究android.听stormzhang以及android开发界的大佬们对mac开发androi ...
- 多文档自己主动文摘：Multi-Document Summarization,MDS
- 【BZOJ4281】[ONTAK2015]Związek Harcerstwa Bajtockiego LCA
[BZOJ4281][ONTAK2015]Związek Harcerstwa Bajtockiego Description 给定一棵有n个点的无根树,相邻的点之间的距离为1,一开始你位于m点.之后 ...
- maven官网下载安装步骤
第一大步:下载. a.俗话说:“巧妇难为无米之炊”嘛!我这里用的是 ZIP Archive 版的,win7 64位的机器支持这个,所以我建议都用这个.因为这个简单嘛,而且还干净. 地址见图 拉倒最下面 ...