以下图示内容请运行源代码
定义:
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)。使用浮动需要注意的是如果浮动的...
在CSS布局中，`float` 属性是一个非常重要的工具，常用于创建多列布局或让元素浮动以便在页面上自由定位。然而，`float` 的使用也会带来一些问题，特别是当它影响到父元素的高度计算时。这就是我们常说的“浮动塌陷...
segment Scattered knowledge points here. Maybe you can find something useful. 最近更新 JavaScript 新旧替换 工作流 Canvas Canvas 绘制 1 px 直线模糊（非高清屏）的问题 ...CSS 浮动 float 小结 Object.obser
如下所示： ...以上这篇python求绝对值的三种方法小结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。 您可能感兴趣的文章:Python中用于返回绝对值的abs()方法
#### 小结 通过以上内容，我们对Java的基础知识有了更深入的理解。了解这些基础知识对于编程非常重要，特别是对于初学者来说。掌握了这些概念后，你可以更好地理解和编写Java代码，同时也能避免一些常见的错误和...
### const extern static volatile 小结 #### 一、Const（常量） `const` 关键字在 C/C++ 语言中用于定义常量，即其值在程序运行期间不可更改的变量。`const` 可以与多种数据类型结合使用，例如 `const int x = 10...
"C语言数据结构的小结"是一个针对初学者的指南，旨在帮助他们理解并掌握C语言中的数据结构概念。数据结构是计算机科学的核心组成部分，它涉及到如何有效地组织和管理数据，以便于高效地访问和操作。 首先，我们要...
小结 本文介绍了 Java 中字符串转 float 运算 float 转字符串的方法，并提供了实践示例。同时，我们还解释了 float 类型的精度问题，并提供了解决方法。希望本文能够帮助大家更好地理解 Java 中的字符串与 float ...
### Java语言基础小结 #### 一、JDK, JRE, JVM的关系 - **JVM（Java Virtual Machine）**：Java虚拟机是Java程序跨平台运行的核心，它负责执行Java字节码（.class文件），确保Java程序可以在不同的平台上运行而...
根据给定的文件信息，我们可以总结出以下关于“DIF变换C编程的方法和小结”的相关知识点： ## DIF变换简介 ### 1. DIF变换定义 DIF（Decimation in Frequency）变换是离散傅里叶变换（Discrete Fourier Transform,...
Positoin、absolute、Relative 的一些讨论`、`relative absolute 无法冲破的等级问题解决`、`Div CSS absolute 与 relative 的区分小结`、`position:relative/absolute 无法冲破的等级解决`以及`rs.absolutepage=-1 ...
### ARM架构概述与v5、v6、v7版本总结 #### ARM架构简介 ARM（Advanced RISC Machines）是一种基于精简指令集计算（RISC）原则设计的处理器架构。ARM架构广泛应用于移动设备、嵌入式系统以及部分服务器领域。...
### jbox2d小结 #### 一、基础概念与设置 **jbox2d** 是一款基于Box2D物理引擎的Java版本实现，主要用于2D游戏开发中的物理模拟。对于初学者而言，掌握jbox2d的基本用法是至关重要的一步。 1. **时间步长(time...
C语言常见错误小结 在学习C语言的过程中，初学者经常会遇到一些常见错误，这些错误可能来自编程习惯、语法不熟悉或对C语言的特点不了解。下面是十个常见的错误，包括书写标识符时忽略大小写字母的区别、忽略变量的...
### TensorFlow语法小结 在深度学习领域中，TensorFlow是一个非常强大的开源库，它由Google Brain团队开发并维护。此工具被广泛应用于机器学习、神经网络等场景中。以下是对给定文件中的关键知识点进行详细解释。 ...
【C语言附录6错误小结】 在C语言编程中，常常会遇到一些常见的错误，这些错误可能导致程序逻辑错误或者编译错误。以下是一些典型的错误情况及其解析： 1. **误把赋值符=作为等于符==** 在条件语句中，如`if(a=0){...
在这个Python基础小结中，我们将深入探讨五个关键概念：变量、数据类型、条件语句、循环语句以及函数，这些都是Python编程的核心。 首先，让我们来讨论变量。在Python中，变量就像一个盒子，用于存储数据。你可以给...