清除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):转换成 ...
随机推荐
- 【转载】viewState详解
作者:Infinities Loop 概述 ViewState是一个被误解很深的动物了.我希望通过此文章来澄清人们对 ViewState的一些错误认识.为了达到这个目的,我决定从头到尾详细的描述一下整 ...
- python中@property的使用
在绑定属性时,如果我们将属性直接暴露在外面,就可能导致属性被任意修改,有时候这个是我们不希望看到的如:设置学生的成绩 class Student(object): def __init__(self) ...
- linux init->upstart->systemd
http://en.wikipedia.org/wiki/Init init From Wikipedia, the free encyclopedia This article is abo ...
- Python操作Execl 实现自动化填表
任务简述: 表1是一个简单的数据表,共有110行,25列.第1行是表头,例如“负责人”.“事项”.“期限”等. 第2行——第110行是对应的数据,如“张三”.“搬砖头”.“3天”. 想要做的表(表2) ...
- 【问】Windows下C++局部变量在内存中的分布问题
原本是为了看看C++对象模型中子对象赋值给一个父对象和父类型指针指向的域时,到底会不会切割,就打开codebloks写了下面的代码,编译器选的是GNU. #define DEBUG(X) std::c ...
- 整合Kafka到Spark Streaming——代码示例和挑战
作者Michael G. Noll是瑞士的一位工程师和研究员,效力于Verisign,是Verisign实验室的大规模数据分析基础设施(基础Hadoop)的技术主管.本文,Michael详细的演示了如 ...
- 给js对象赋值，赋值key
var pastResult = []; pastResult.push(feature.attributes.F_iID); pastResult.push(feature.attributes.F ...
- TP 框架 如果去掉表前缀
#jd_admin_abc 去掉前缀 C('DB_PREFIX')=获取前缀 结果为admin_abc $table_Name=str_replace(C('DB_PREFIX'), '', $tab ...
- Linux系统初始化流程
POST-->BIOS(Boot Sequence)-->MBR(bootloader)-->Kernel(initrd)-->/sbin/init(/etc/inittab) ...
- Selenium 我的自动化测试历程 (Selenium+TestNG+Java+ReportNG+Jenkins)
测试环境:Java+Selenium+TestNG,Jenkins持续集成. 测试代码 代码结构 采用页面对象模型(Page Object),减少UI修改后,对代码的影响. Java编写,采用Te ...