. Float basics 浮动基础

在了解浮动之前，要先了解文档流。文档流是正式输出的流。元素在前面的元素先输出。元素写在后面的后输出。块级元素占满一行。内联元素按内容的大小占空间。且不占一行。文档流有别于浮动流。根据w3school规定，由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。如下：

这个黄色的框在左浮动后，他下面的文字p元素就上来了。（为什么上来，因为p元素忽视浮动框的存在。P是文档流。黄色框是浮动流。）这样，他和黄色框是在同一行。文字照顾到框的存在所以向后缩进。其实<p>是也占一行的。但是它忽视黄色框的存在。按正常的文档流输出。Float以前主要是用于文字环绕图片的效果。

注释： 所有元素属性中有float或者position：abselute后 这个元素输出就是浮动流。怎么浮动看第2条。个人这么理解：浮动元素跟着浮动元素走。不考虑文档流。

1. 什么是浮动？

浮动是指浮动一个元素。当你浮动一个元素后，他就会变成一个块级元素。而且浮动时元素只能浮动到同一行的左边或者右边。

浮动的盒子脱离文档流，然后飘到最左边或者最后边。（具体见下面的解释！）

2. Where will a floated element move to? 浮动元素怎么浮动！

Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.

浮动的元素到达 body元素的边框

或者 其父元素的边框或者到达另外一个浮动的边框。

If there isn't enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it.

译文：如果对于浮动元素来讲他所在的行没有足够的空间给他。他会移到下面的一行。下面的例子：黑盒子做float：left，黄色的做float：right。

3．当你浮动一个元素时，需要设置一个宽度。

4. 下面分析的是：一个元素在浮动元素的上面或者下面。

（重要的知识点：）★★★★★★★

第一：块级元素在上，飘的元素在下。块级元素不会受到影响。

第二：如果飘的元素在上，在他下面的元素讲会受他的影响，包围他。对于文字的话他会围绕飘的元素。但是其他块级元素，图片会伸展到其地下去。这个我从dreamweaver中已经也看到了。

看图：

如果你不想《p》元素上去了和黄色的框在同一行。可以用：清除浮动。

对p实行清除浮动。

处理这样的问题，可以对块级使用清除浮动。

规则如下：clear: left 、clear: right; clear:none;

如果你不想在浮动层下面的元素包围浮动层，你可以用清除浮动。

总结：一般元素浮动后，会空出自己的所有行。左边也好右边也好。

然后其他元素就会包围他。他需要清除自己的左边或者右边。就是表示他还是像以前那样占那么多行。比如图片占了那么多行。不让其他元素包围他。

要理解下面的现象：

上面的图片是由这个排列出来的。

Div4 因为第一行排不下去了，所以要下来。他这里有一个过程：先排到div3后面，因为排不下去了，后来就又飞到了div1的下面。因为div1高度高，把他给卡住啦。就出现了这样的情况。

基本概念：

Viewport是windows窗口的文档可见部分。

Initial containing block：是对于页面来讲的。指页面的总宽和长。

Containing box：指的是一个box。这个box带有其他元素，比如p，ul等元素。

Normal flow：文档的正常输出，如果没有float 或者position应用到这个元素。

天这篇文章我们来说一下css的浮动属性（float），给块状元素添加float属性可以使其转变为行内元素，也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。

（1）float使用语法

css的float主要有3个属性值none、left、right，默认为none；具体的使用如下所示：

float:none; （不使用浮动）

float:left; （靠左浮动）

float:right; （靠右浮动）

（2）float使用案例

我们通过案例来实际演练一下float元素的使用技巧。

1、float:left的使用练习

我们这里创建一个导航条，导航条包含首页、关于我们、新闻中心、案例展示等栏目名称。具体的网页代码以及显示效果就如下图所示：

由上图可以看出默认的样式是竖排显示的，但是我们常见的网页导航条都是横排显示的，这时候我们就可以使用float属性来使块状元素转变为行内元素，并让居左显示。

这里我们创建一个宽度为980px的导航条，给子元素（li）添加float的属性并对齐进行填充（padding）以及外间距（margin）的润色。具体的网页代码以及显示效果就如下图所示：

网页中的显示效果：

2、float:right的使用练习

float:right顾名思义用于元素靠右对齐，我们来看下面的一个例子，我们随意写一篇文字，然后文字中插入一张图片并使图片右对齐。

我们再网页中可以看到图片已经浮动到网页的右侧中去了。

好了，本篇文章就给大家说到这里，大家可以注意看下我们使用float之后会出现什么问题，下边文章我们会给大家讲解如何清除float带来的负面影响。

每日金句：你不能拼爹的时候，你就只能去拼命！喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。

么是 CSS Float（浮动）？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

实例

img

{

float:right;

}

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

实例

.thumbnail

{

float:left;

width:110px;

height:90px;

margin:5px;

}

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

实例

.text_line

{

clear:both;

}

尝试一下 »

更多实例

为图像添加边框和边距并浮动到段落的左侧

让我们为图像添加边框和边距并浮动到段落的左侧

标题和图片向右侧浮动

让标题和图片向右侧浮动。

让段落的第一个字母浮动到左侧

改变样式，让段落的第一个字母浮动到左侧。

创建一个没有表格的网页

使用 float 创建一个网页页眉、页脚、左边的内容和主要内容。

CSS 中所有的浮动属性

"CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！