动的定义

float:left;(向左浮动) float:right;（向右浮动）

使元素脱离文档流，按照指定方向（左右）发生移动，

遇到父级边界或者相邻的浮动元素停了下来。

文档流

是文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)

脱离文档流：在页面中不占位置

浮动的一般情况

当把框 1 向右浮动时，它脱离文档流并且向右移动，

直到它的右边缘碰到包含框的右边缘

无浮动

向左浮动

向右浮动

浮动的特殊情况

当框 1 向左浮动时，框1不占空间，相当于悬浮，

框1覆盖住了框 2，使框 2 从视图中消失。

给了浮动的元素，只会影响后面的元素；(任何元素都可以浮动)

如果父级宽度太窄，无法容纳所有的浮动元素，无法容纳的浮动元素会往下掉

如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像

好了这期就到这里，要是觉得还行那就关注我吧，我会送出一套网站前端的基础视频，需要的可以找我哟

最后要是有什么不对的地方欢迎大神在评论区留言吐槽。

天这篇文章我们来说一下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，我们一起飞！