以下图示内容请运行源代码
定义:
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。
注意点:
1. 浮动元素会生成一个块级框（inline-block），而不论它本身是何种元素。（图示1）
2. 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄（包裹性）。（图示2）
3. 假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。（图示3）
4. 相邻元素的左右浮动布局。（图示4）
5. 当我们浮动一个元素时，它的父元素将不会承认浮动的元素，这也就意味着，它们的父元素，不会相应的来调整本身的尺寸。那么父元素的高度就会塌缩为零。如果父元素不包含任何的可见景，这个问题会很难被注意到。（IE6，IE7除外，未塌陷）（图示5）
6. 为了防止怪异的布局和跨浏览器的问题，塌陷问题几乎总是被要处理的。我们在容器中的浮动元素之后，容器结束之前来清除浮动。（图示6）
投机取巧法:就是直接一个<div style="clear:both;"></div>，增加多余标签
overflow + zoom方法: .fix{overflow:hidden; zoom:1;}
父元素使用float的方法
伪类的方法
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hide from IE Mac \*/
.clearfix {
display: block;
}
/* End hide from IE Mac */
7. 对于浮动局部的局限性，就是每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”,如下图所示：
为每个元素设置相同高度时，如下图所示：
8. 一个元素浮动时，其他内容会“环绕”该元素，浮动元素脱离文档流，彼此（浮动元素）不相互“覆盖”。浮动元素周围的外边距不会合并。
9. 大多数情况下无法知道一个元素周围多大范围内不允许有浮动元素，要确保清除元素（设置clear属性值的元素）的顶端与一个浮动元素的底端之间有一定的空间，可以为浮动元素本身设置一个下边距。
10.行内框与一个浮动元素重叠时，其边框、背景和内容都在浮动元素“之上”显示。
块框与一个浮动元素重叠时，其边框，背景在该浮动元素“之下”显示，而内容在浮动元素“之上”显示。
未重叠的场合：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>float元素的margin负值</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.father div{border:2px solid #ffccaa;}
body{font-size:16px;}
</style>
</head>
<body>
<!--黄色-->
<div class="father" style="float:left;background:#500;width:200px;">
<div style="background: yellow;color:silver">
the first div<span style="background:#000">the content has been wrapped by span</span>
</div>
<div style="float:left;margin: 0px 0px 0 10px;background: red;">
second div second div second div second div
second div second div second div second div
second div second div second div second div
second div second div second div second div
</div>
<!--绿色-->
<div style="background:#590;">
3 3 div 3 third div 3 third div third div third div third div third div third div3<br>
</div>
</div>
<div style="background: blue;color:#fff">
the fourth div none float we are testing need some more words.the fourth div none float we are testing need some more words.
<span style="background:#012">the fourth div none float we are testing need some more words.
the fourth div none float we are testing need some more words.</span>
the fourth div none float we are testing need some more words.
the fourth div none float we are testing need some more words.
the fourth div none float we are testing need some more words.
</div>
</body>
</html>
效果图：
重叠的场合（margin设置为负值）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>float元素的margin负值</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.father div{border:2px solid #ffccaa;}
body{font-size:16px;}
</style>
</head>
<body>
<!--黄色-->
<div class="father" style="float:left;background:#500;width:200px;">
<div style="background: yellow;color:silver">
the first div<span style="background:#000">the content has been wrapped by span</span>
</div>
<div style="float:left;margin: -30px -30px 0 10px;background: red;">
second div second div second div second div
second div second div second div second div
second div second div second div second div
second div second div second div second div
</div>
<!--绿色-->
<div style="background:#590;">
3 3 div 3 third div 3 third div third div third div third div third div third div3<br>
</div>
</div>
<div style="background: blue;color:#fff">
the fourth div none float we are testing need some more words.the fourth div none float we are testing need some more words.
<span style="background:#012">the fourth div none float we are testing need some more words.
the fourth div none float we are testing need some more words.</span>
the fourth div none float we are testing need some more words.
the fourth div none float we are testing need some more words.
the fourth div none float we are testing need some more words.
</div>
</body>
</html>
效果图（Firefox chrome safari IE8 IE9）：
效果图：（IE7）
用途:
1.除了简单的在图片周围包围文字，浮动可用于创建全部网页布局。
2.浮动对小型的布局同样有用。例如页面中的这个小区域。如果我们在我们的小头像图片上使用浮动，当调整图片大小的时候，盒子里面的文字也将自动调整位置。同样的布局可以通过在外容器使用相对定位，然后在头像上使用绝对定位来实现。这种方式中，文本不会受头像图片大小的影响，不会随头像图片的大小而有相应变化。（图示7）
源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Float</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.div1 {
margin-bottom:10px;
border:solid 1px #000000;
background-color:yellow;
}
.div2 {
margin-bottom:10px;
border:solid 1px #000000;
background-color:yellow;
}
.bgcolorWhite{background-color:#f0f3f9;}
.bgcolorBlue{background-color:#00f3fA;}
.bgcolorGreen{background-color:green;}
.wid400{width:400px;}
.wid300{width:300px;}
.wid200{width:200px;}
.hgt50{height: 50px;}
.hgt40{height: 40px;}
.hgt30{height: 30px;}
.hgt20{height: 20px;}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hide from IE Mac \*/
.clearfix {
display: block;
}
/* End hide from IE Mac */
.fl{float:left;}
.fr{float:right;}
.box_absolue{position: absolute;}
.box_relative {position: relative;}
h2{color: red;}
.pl140{padding-left:140px;}
</style>
</head>
<body>
<h2>图示1</h2>
<span class="div1 fl wid300">浮动元素会生成一个块级框</span>例如span 设置宽度后显示的效果
<div class="clearfix"></div>
<hr>
<h2>图示2</h2>
<!--含float的元素未设置宽度 -->
<div class="div1 fl bgcolorWhite">
<img src="global/agy_compen.jpg" />
<span>无宽度包裹特性</span>
</div>
<br>
<!--含float的元素设置宽度 -->
<div class="div1 fl wid300 bgcolorBlue">
<img src="global/agy_compen.jpg" />
<span>有宽度</span>
</div>
<!--no float -->
<div class="div1 bgcolorGreen">
<img src="global/agy_compen.jpg" />
<span>no float</span>
</div>
<div class="clearfix"></div>
<hr>
<h2>图示3</h2>
<div>
<h4>框1，框2，框3，框4都未设置浮动float</h4>
<div class="div1 wid200 hgt30">框1</div>
<div class="div1 wid200 hgt20 bgcolorGreen">框2</div>
<div class="div1 wid400 hgt40 bgcolorBlue">框3</div>
<div class="div1 wid400 hgt40 bgcolorWhite">框4</div>
</div>
<div>
<h4>高度不同时，出现被"卡"住的效果。例如：框1，框2，框3，框4都设置浮动float:left</h4>
<div class="div1 wid200 hgt50 fl">框1</div>
<div class="div1 wid200 hgt20 fl bgcolorGreen">框2</div>
<div class="div1 wid400 hgt20 fl bgcolorBlue">框3</div>
<div class="div1 wid400 hgt30 fl bgcolorBlue">框3</div>
<div class="div1 wid400 hgt40 fl bgcolorWhite">框4</div>
</div>
<div class="clearfix" style="clear:both" ></div>
<hr>
<h2>图示4</h2>
<div>
<h4>框1，框3，框4都未设置浮动，框2为float:left</h4>
<div class="div1 wid200 hgt30">框1</div>
<div class="div1 wid200 hgt20 fl bgcolorGreen">框2</div>
<div class="div1 wid400 hgt40 bgcolorBlue">框3</div>
<div class="div1 wid400 hgt40 bgcolorWhite">框4</div>
</div>
<div>
<h4>框1，框4都未设置浮动，框2为float:left 框3为float:right</h4>
<div class="div1 wid200 hgt30">框1</div>
<div class="div1 wid200 hgt20 fl bgcolorGreen">框2</div>
<div class="div1 wid400 hgt40 fr bgcolorBlue">框3</div>
<div class="div1 wid400 hgt40 bgcolorWhite">框4</div>
</div>
<hr>
<h2>图示5</h2>
<!--float属性总应用于图像，使文本围绕在图像周围 -->
<h4>float属性总应用于图像，使文本围绕在图像周围。如果父元素只包含浮动元素，那么它的高度就会塌缩为零（IE6，IE7除外，未塌陷）</h4>
<div class="fl">
<div class="div1 wid400">
<img src="global/agy_compen.jpg" />图片未添加浮动，
<br>第二行文字
</div>
</div>
<div class="fl">
<div class="div1 wid400">
<img class="fl" src="global/agy_compen.jpg" />图片添加浮动，
<br>第二行文字
</div>
</div>
<div class="clearfix"></div>
<hr style="clear:both">
<h2>图示6</h2>
<!-- clear float start-->
<h4>解决塌陷的方案:清除浮动方法（IE6，IE7除外）</h4>
<div class="fl">
<!-- 解决方法1-->
<div class="div1 wid400 fl">
<img class="fl" src="global/agy_compen.jpg" />添加浮动，
<br>清除浮动方法1：clear:both;
<div style="clear:both;"></div>
</div>
</div>
<div class="fl">
<!-- 解决方法 2-->
<div class="div1 wid400" style="overflow:hidden; zoom:1;">
<img class="fl" src="global/agy_compen.jpg" />添加浮动，
<br>清除浮动方法2：overflow:hidden; zoom:1;
</div>
</div>
<div class="clearfix" style="clear:both"></div>
<div class="fl">
<!-- 解决方法 3-->
<div class="div1 wid400" style="float:left;">
<img class="fl" src="global/agy_compen.jpg" />添加浮动，
<br>清除浮动方法3：父标签添加float:left
</div>
</div>
<div class="fl">
<!-- 解决方法 4-->
<div class="div1 wid400 clearfix">
<img class="fl" src="global/agy_compen.jpg" />添加浮动，
<br>使用clearfix
</div>
</div>
<!-- clear float start-->
<div class="clearfix"></div>
<hr style="clear:both">
<h2>图示7</h2>
<h4>absolute和float布局效果的不同</h4>
<div class="fl">
<div class="div1 wid400">
<img class="fl" src="global/agy_compen.jpg" />图片浮动，
<br>第二行文字
</div>
</div>
<div class="fl">
<div class="div1 wid400 box_relative">
<img class="box_absolue" src="global/agy_compen.jpg" />
<div class="pl140">图片固定定位(absolute)，
<br>第二行文字</div>
</div>
</div>
<div class="clearfix" style="clear:both"></div>
<div class="fl">
<div class="div1 wid400" style="width:400px;">
<img class="fl" src="global/agy_compen1.jpg" />图片浮动，图片变大
<br>第二行文字
</div>
</div>
<div class="fl" >
<div class="div1 wid400 box_relative">
<img class="box_absolue" src="global/agy_compen1.jpg" />
<div class="pl140">图片固定定位(absolute)，图片变大
<br>第二行文字</div>
</div>
</div>
</body>
</html>
参考文献:Float的用处http://paranimage.com/css-float-attribute/
相关推荐
float常跟属性值left、right、none float:none 不使用浮动 float:left 靠左浮动 float:right 靠右浮动 二、浮动的用途 可设置文字环绕或使元素宽度由内容填充（类似Inline-block)。使用浮动需要注意的是如果浮动的...
segment Scattered knowledge points here. Maybe you can find something useful. 最近更新 JavaScript 新旧替换 工作流 Canvas Canvas 绘制 1 px 直线模糊（非高清屏）的问题 ...CSS 浮动 float 小结 Object.obser
C语言数组排序小结
如下所示： ...以上这篇python求绝对值的三种方法小结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。 您可能感兴趣的文章:Python中用于返回绝对值的abs()方法
在你使用float属性进行页面布局的时候：例如： 添加css属性： .container { //因为要通过box撑起container的高度，所以这里不设置height width: 300px; border: 1px solid black; background-color: ...
我就废话不多说了，直接上代码吧！ import torch import torch.nn.functional as F import numpy as np from torch.autograd import Variable ... classWeights = np.ones(6, dtype=np.float32) normHist =
C语言常见错误小结 2008-06-12 10:55:08 C语言的最大特点是：功能强、使用方便灵活。C编译的程序对语法检查并不象其它高级语言那么严格，这就给编程人员留下 “灵活的余地”，但还是由于这个灵活给程序的调试带来...
1.4 小结 46 第2章 体系结构概述 47 2.1 定义数据库和实例 48 2.2 SGA和后台进程 53 2.3 连接Oracle 56 2.3.1 专用服务器 56 2.3.2 共享服务器 57 2.3.3 TCP/IP连接的基本原理 58 2.4 小结 61 第3章 文件 ...
ceil — 进一法取整 说明 float ceil ( float value ) 返回不小于 value 的下一个整数，value 如果有小数部分则进一位。ceil() 返回的类型仍然是 float，因为 float 值的范围通常比 integer 要大。 例子 1. ceil() ...
#第一天学习`python`小结 一.变量 1.变量名必须是大小写、数字下划线，不能用数字开头，并且对大小写敏感。 2.关键字不能用于关键变量（31个），如and、as、assert等。 3.在python中使用“#”单行注释，也可以使用...
float:left/right/none; 1.同级浮动 （1）使块级元素在同一行显示（所有要在同一行显示的都要加浮动） <div class=box1>box1 <div class=box2>box2 <div class=box3>box3 .box1{ border: 2px solid red; width: ...
在使用“float”时，因为“float”是javascript的一个保留字，所以就不能使用style.float，而改成了style.cssFloat(IE使用的是style.styleFloat)； 3. 获得元素的计算样式: 在W3C DOM下可以： 代码如下: var heading...
仙农编码实验报告 一、实验目的 实验仙农编码算法 二、实验步骤 1、输入信源个数n 2、输入n个信源的概率 3、由大到小重新排列信源 4、实现信源概率的叠加 5、计算码长l 6、编码 7、计算平均码长pl、信源熵Hx以及编码...
1、父级div定义伪类：after和zoom <style type=text/css> .div1{background:#... .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD}
在这篇文章中，作者介绍了7个在IE和Firefox中不同的JavaScript句法。 1. CSS “float” 值 访问一个给定CSS 值的最... 但由于”float”这个词是一个JavaScript保留字，因此我们不能用 object.style.float 来访问，这
CSS的float浮动效果在一些情况下非常不稳定,控制不好的时候一般还是清除浮动为妙,这里我们就来看一下CSS浮动所差生的内容溢出问题及清除浮动的方法小结
分享给大家供大家参考。具体如下： 复制代码 代码如下:<... return ((float) $usec + (float) $sec ); } ////////////////////////////////////////// //欧几里得算法 function ojld($m, $n) { if($m ==0 &&
float: right; } 如图： 如果其他元素要避开这个元素 复制代码代码如下:#footer{ clear: both;} 如图： 2、冻结布局 元素还保留在页面流中，锁定这个元素，冻结在页面上，不论放大还是缩小窗口，这个元素的大小...