动的定义

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

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

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

文档流

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

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

浮动的一般情况

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

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

无浮动

向左浮动

向右浮动

浮动的特殊情况

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

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

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

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

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

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

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

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

么是 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，我们一起飞！