定义

浮动会使元素向左或向右移动，其周围的元素也会重新排列；

浮动直到它的外边缘碰到包含框或者另一个浮动框才停止；

浮动之后的元素将围绕它，浮动之前的元素不变；

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

浮动属性

float：left，right，none（默认值），inherit

清除浮动

浮动元素容器的clearing问题
1. 问题的由来
有这样一种情形：在一个容器（container）中，有两个浮动的子元素。
<div>
        <div style="float:left;width:45%;"></div>
        <div style="float:right;width:45%;"></div>
</div>
在浏览器中一运行，就会出现意想不到的结果。实际视图是子元素显示在父容器的外部。
2. 问题的原因与浮动定位有关。
在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了显示出来，父容器好像空容器一样。

解决办法：

1.解决方法一：添加空元素
经典的解决方法，就是在浮动元素下方添加一个非浮动元素。
代码这样写：
<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
<div style="clear:both;"></div>
</div>
原理是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。这种方法比较简单，但是要在页面中增加冗余标签，违背了语义网的原则。

2.解决方法二：浮动的父容器
另一种思路是，索性将父容器也改成浮动定位，这样它就可以带着子元素一起浮动了。
<div style="float:left;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
这种方法不用修改HTML代码，但是缺点在于父容器变成浮动以后，会影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。

3.解决方法三：浮动元素的自动clearing
让父容器变得可以自动"清理"（clearing）子元素的浮动，从而能够识别出浮动子元素的位置，不会出现显示上的差错。

要做到这点，只要为父容器加上一条"overflow: hidden"的CSS语句就行了。关于为何父容器可以自动识别：由于加上overflow:hidden之后要计算超出的大小来隐藏，所以父容器会自动撑开自己把所有的子元素放进去，同时会计算浮动的子元素。

代码这样写：

<div style="overflow: hidden;">

<div style="float:left;width:45%;"></div>

<div style="float:right;width:45%;"></div>
</div>
这种方法的缺点主要有二个，一个是IE 6不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

4.解决方法四：
我们知道CSS语句中有一个:after伪选择符，就可以在父容器的尾部自动创建一个子元素，这正好符合我们的需要。
下面的代码参照了lifesinger的写法：
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
"clearfix"是父容器的class名称，"content:"020";"是在父容器的结尾处放一个空白字符，"height: 0;"是让这个这个空白字符不显示出来，"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。
但是，:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？
我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。

8.附录 什么是hasLayout
IE使用Layout概念来控制元素的尺寸和位置。如果一个元素有Layout，它就有自身的尺寸和位置；如果没有，它的尺寸和位置由最近的拥有布局的祖先元素控制。
在默认情况下，拥有Layout的元素包括：
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
（注意，<p>和<div>默认不拥有Layout。）
凡是具有以下CSS属性的元素，也会拥有布局：
position: absolute
float: left|right
display: inline-block
width: any value other than 'auto'
height: any value other than 'auto'
zoom: any value other than 'normal' （IE专用属性）
writing-mode: tb-rl（IE专用属性）
overflow: hidden|scroll|auto（只对IE 7及以上版本有效）
overflow-x|-y: hidden|scroll|auto（只对IE 7及以上版本有效）

hasLayout是IE特有的属性，不是CSS属性。可以用JavaScript函数hasLayout查看一个元素是否拥有Layout。如果有，这个函数就返回true；否则返回false。hasLayout是一个只读属性，所以无法使用JavaScript进行设置。

CSS浮动（Float）的更多相关文章

  1. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

  2. 验分享：CSS浮动(float,clear)通俗讲解

    经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...

  3. css浮动(float)及如何清除浮动

    前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...

  4. CSS浮动(float,clear)通俗讲解

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  5. 经验分享：CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  6. 经验分享：CSS浮动(float,clear)通俗讲解(转载)

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  7. 经验分享：CSS浮动(float,clear)通俗讲解 太棒了，清晰明了

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  8. （转）经验分享：CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  9. css浮动--float/clear通俗讲解（转载）

    本文为转载 (出处:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html) 教程开始: 首先要知道,div是块级元素,在页面 ...

  10. (转)经验分享：CSS浮动(float,clear)通俗讲解

    文章转自:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身 ...

随机推荐

  1. Running Spark on YARN

    Running Spark on YARN 对 YARN (Hadoop NextGen) 的支持是从Spark-0.6.0开始的,后续的版本也一直持续在改进. Launching Spark on ...

  2. 云计算-openstack基础构架以及服务方式详解

    一:什么是openstack 是Rackspace(美国航天局)和NASA(一家公司)共同发起的开源项目,他是一系列软件项目的组合. 这些项目是松耦合的关系,可以进行独立的安装,启动和停止,只有在必要 ...

  3. Crayon 线段树或者树状数组

    Crayon Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) SubmitStatus ...

  4. 如何维护一个1000 IP的免费代理池

    楔子 好友李博士要买房了, 前几天应邀帮他抓链家的数据分析下房价, 爬到一半遇到了验证码. 李博士的想法是每天把链家在售的二手房数据都抓一遍, 然后按照时间序列分析. 链家线上在交易的二手房数据大概有 ...

  5. struts2中的Ajax异步校验

    登录时验证码的异步校验: 1.验证码生成的是图片因此在struts.xml文件里面配置action 时,result标签中type 属性是stream 2.验证码图片的src的值为配置action名字 ...

  6. WebApi接口返回json,xml,text纯文本等

    [Route("api/Message/MessageList/")] [HttpGet] public HttpResponseMessage MessageList() { R ...

  7. 从给数组中的对象去重看Javascript中的reduce()

    假设有这样一个数组: let person = [ {id: 0, name: "小明"}, {id: 1, name: "小张"}, {id: 2, name ...

  8. python3.6安装pyspider

    win10下安装pyspider 1.pip 我在安装pip的时候默认安装了Pip. 如果没有的话:pip安装 2.PhantomJS PhantomJS 是一个基于 WebKit 的服务器端 Jav ...

  9. ASP.NET没有魔法——ASP.NET MVC是如何运行的？它的生命周期是什么？

    前面的文章我们使用ASP.NET MVC创建了个博客应用,那么它是如何工作的呢?我们都知道ASP.NET的程序需要部署到IIS上才能够通过浏览器来访问,那么IIS与ASP.NET MVC程序之间又是如 ...

  10. 用Python来实现列举某个文件夹内所有的文件列表

    用Python来实现列举某个文件夹内所有的文件列表.吾八哥我动手写代码之前分析了下,遍历一个文件夹,肯定是需要用到os模块了,查阅模块帮助信息,可知os.listdir()方法可以列举某个文件夹内的所 ...