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.

看一个例子：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=utf-8 />
  5. <style>
  6. .parent {
  7.   background: blue;
  8.   height: 400px;
  9.   color: white;
  10.   font-family: Arial, sans-serif;
  11. }
  12.  
  13. .child1 {
  14.   width: 30px;
  15.   height: 30px;
  16.   background: red;
  17.   float: left;
  18. }
  19.  
  20. .child2 {
  21.   background: green;
  22.   height: 100px;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27.   <div class="parent">
  28.     <div class="child1"></div>
  29.     <div class="child2">This text flows around the red box. The green box that holds the text doesn't.</div>
  30.   </div>
  31. </body>
  32. </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。

  1. .clearfix:before,
  2. .clearfix:after {
  3.     content: " ";
  4.     display: table;
  5. }
  6. .clearfix:after {
  7.     clear: both;
  8. }
  9. /* For IE 6/7 only */
  10. .clearfix {
  11.     *zoom:;
  12. }

如果你想适应IE8及其以上的，只要

  1. .clearfix:after {
  2.   content: "";
  3.   display: table;
  4.   clear: both;
  5. }

你所要做的就是将clearfix类添加到包含floated的父元素上，你当然也可以使用overlow:hidden但是会导致很多布局上的其他问题。

清除float浮动三种方式的更多相关文章

  1. css清除浮动float的三种方法总结

    原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...

  2. 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  3. HTML连载49-清除浮动的第三种方式（内外墙法）

    一.清除浮动的第三种方式 1.隔墙法有两种​如下:外墙法和内墙法​.​ 2.外墙法 (1)在两个盒子中间添加一个额外的块级元素 (2)给这个额外添加的块级元素设置:clear:both;属性 注意点: ...

  4. python 全栈开发，Day94(Promise,箭头函数,Django REST framework,生成json数据三种方式,serializers,Postman使用,外部python脚本调用django)

    昨日内容回顾 1. 内容回顾 1. VueX VueX分三部分 1. state 2. mutations 3. actions 存放数据 修改数据的唯一方式 异步操作 修改state中数据的步骤: ...

  5. HTML5实现动画三种方式

    编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制 ...

  6. [转] Bound Service的三种方式（Binder、 Messenger、 AIDL）

    首先要明白需要的情景,然后对三种方式进行选择: (一)可以接收Service的信息(获取Service中的方法),但不可以给Service发送信息 (二) 使用Messenger既可以接受Servic ...

  7. Java Class类以及获取Class实例的三种方式

    T - 由此 Class 对象建模的类的类型.例如,String.class 的类型是Class<String>.如果将被建模的类未知,则使用Class<?>.   publi ...

  8. 编写Unity3D着色器的三种方式

    不管你会不会写Unity3D的shader,估计你会知道,Unity3D编写shader有三种方式,这篇东西主要就是说一下这三种东西有什么区别,和大概是怎样用的. 先来列一下这三种方式: fixed ...

  9. PHP中数据类型转换的三种方式

    PHP中数据类型转换的三种方式 PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: 1.(int).(integer):转换成整形2.(float).(double).(real):转换成 ...

随机推荐

  1. java移位运算符详解

    http://soft.chinabyte.com/database/195/11553695.shtml java移位运算符不外乎就这三种:<<(左移).>>(带符号右移)和 ...

  2. Excel工作表忘记密码如何破解？

    第一种方法就是按住快捷键ALT+F11,然后切换出VBA编辑窗口,如图一:在该窗口的左侧我们的选择那个忘记密码的工作表,比如sheet 1... 2 然后我们复制以下代码 “Sub Pojie()Ac ...

  3. arcgis水文分析

    前言 1.在开始之前首先需要注意几点: 1.arcgis 需要 python2.7 的支持,并有必要的模块库,请一定注意避免与其他软件冲突,例如tecplot 2009 需要python2.5的支持, ...

  4. Spring IOC源码分析之-刷新前的准备工作

    目录 ClassPathXmlApplicationContext的注册方式 加载父子容器 配置路径解析 容器刷新 刷新容器之刷新预处理 ClassPathXmlApplicationContext的 ...

  5. ubuntu下matlab的无界面启动---命令行操作

    命令行下运行 Matlab 及 函数 首先参考命令行下matlab的运行参数的定义与作用:http://www.cnblogs.com/beanocean/p/3677404.html 创建示例程序: ...

  6. Redis单台的安装部署及集群部署

    Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,而且支持的数据类型很丰富.有字符串,链表,集 合和有序集合.支持在服务器端计算集合的并,交和补集(diff ...

  7. oracle角色（role）概念

    一个角色是一组特权,它可以授权给用户或其它角色. 特权有:create table,select on boss ,create session,insert on boss,update on bo ...

  8. 多媒体开发之rtp打包---打包中的FU-A分包方式说明

    继上篇rtp中的时间戳和负载类型之后,升入到了nalu的分片打包问题,这里做下笔记 (1)fu-a的打包格式 1.基于RTP协议的打包及解包 (1)单个NAL打包 H.264NALU单元常由[star ...

  9. spring事务和mysql的隔离级别

    mysql事务.mysql隔离级别.mysql锁.mysql数据一致性.Spring事务.Spring事务传播性之间的关系 一直有些模糊,整理一下.   mysql事务: 在mysql中,只有使用了I ...

  10. 九度OJ 1011：最大连续子序列 （DP）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5615 解决:2668 题目描述:     给定K个整数的序列{ N1, N2, ..., NK },其任意连续子序列可表示为{ Ni, N ...