清除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):转换成 ...
随机推荐
- Scanner遇上UnmappableCharacterException
上周末的时候.朋友约好去KTV,鉴于我这样的不怎么听歌的孩子伤不起啊,灵机一动就把我的酷狗歌单导出来了,XML文件嘛,内容太多,我仅仅想要歌名足已. 于是写了一个java去输出歌名. 岂料我受 ...
- JAVA学习第十四课（接口：implements及其基本应用）
接口: 我们知道抽象类中能够定义抽象方法,也能够定义非抽象方法.当一个抽象类中的方法都是抽象方法的时候,我们就能够定义还有一种表现方式:接口(interface),所以接口是一种特殊的抽象类 接口的出 ...
- Build Your Jekyll Blog (On Github)
http://kevinjmh.github.io/web/2014/04/20/build-your-jekyll-blog/ 20 April 2014 On GitHub Follow the ...
- ASP.NET MVC 扩展自定义视图引擎支持多模板&动态换肤skins机制
ASP.NET mvc的razor视图引擎是一个非常好的.NET MVC 框架内置的视图引擎.一般情况我们使用.NET MVC框架为我们提供的这个Razor视图引擎就足够了.但是有时我们想在我们的 ...
- linux下编译ffmpeg 引入外部库x264
Found no assembler Minimum version is nasm-2.13 If you really want to compile without asm, configure ...
- Linux Sed命令具体解释+怎样替换换行符"\n"(非常多面试问道)
Sed Sed是一个强大的文本处理工具 能够採用正则匹配.对文本进行插入删除改动等操作 Sed处理的时候,一次处理一行,每一次把当前处理的存放在暂时缓冲区.处理完后输出缓冲区内容到屏幕,然后把下一行读 ...
- （webstorm的css编写插件）Emmet：HTML/CSS代码快速编写神器
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
- java 中的final
在编程语言中都有某种方式,告知编译器一块数据是恒定不变的.有两个需求 1. 一个永不改变的编译器常量 2. 一个在运行时被初始化的值,而这个值不会被改变 在Java中,使用final修饰变量实现这两个 ...
- jQuery Validate(三)
这里,我们再说说radio.checkbox.select的验证方式. 1.用新版的写法进行验证. <!DOCTYPE html> <html> <head> &l ...
- 用array_search 数组中查找是否存在这个 值
#判读里面是否还有id=1的超级管理员 $key=array_search(1, $ids); #判读这个是否存在 if($key!==FALSE){ #如果存在就unset掉这个 unset($id ...