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

页面布局中，有两个非常常用的CSS属性。它们巧妙的控制着块级元素们之间的位置，灵活的让块级元素在一行内显示或者另起一行。说到这里，相信大家已经猜出来了，这两个属性就是控制块级元素浮动的属性。整个页面布局过程中，浮动属性的使用频率是最高的。今天，小海老师就来带领大家一同认识这两个神奇的CSS属性。

承接文章：发挥个人的优势，踏踏实实的学习前端开发，小海为你传授学习心得

技术等级：初级 | 适合前端开发的初学者阅读学习。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

一、浮动属性：

CSS技术使用float属性来实现块级元素的浮动效果。

CSS技术使用float属性实现浮动效果

该属性可以有下列取值：

• left，控制块级元素左浮动。

• right，控制块级元素右浮动。

属性说明：我们都知道，块级元素之间默认情况下是独占一行的。也就是说，两个在代码中紧密相连的块级元素，它们的摆放位置是一个在上一行，另一个在下一行。尽管通过width和height属性为块级元素设置了大小，使得块级元素无法占满整个行，但是块级元素右侧空余的位置仍然不允许出现任何内容。

让我们一同来看下列实例：

HTML代码如下所示：

<div id=”box01”></box>

<div id=”box02”></box>

CSS代码如下所示：

#box01,#box02{

width:200px; height:100px;

}

#box01{background-color:#ff5857;}

#box02{background-color:#5857ff;}

上述代码的运行结果如下图所示，这张图为我们展示了两个块级元素默认的位置摆放。

展示两个块级元素的默认位置

如果我想让两个块级元素在一行内显示该如何实现呢？这就需要float属性登场了。

将#box01的CSS代码中添加如下属性：float:left，会发生什么情况呢？同学们实践操作一下，我们会发现，屏幕中就只剩下红色的块级元素了。那蓝色的#box02去哪里了呢？其实#box02响应了#box01浮动的号召，和#box01一同出现在同一行了，只是被压在了红色的#box01的下面。

解决方法就是让蓝色的#box02也添加上 float:left的属性。这样，两个块级元素就可以共同出现在一行了。下图为我们展示了这样的效果。

展示两个块级元素的左浮动位置

下面让我们再看一个实例，这个实例中我们为两个块级元素添加一个容器。

HTML代码如下所示：

<div id=”box”>

<div class=”boxLeft”></div>

<div class=”boxRight></div>

</div>

我们设置容器#box的宽度为400px。内部的两个块级元素：.boxLeft的宽度设置为150px；.boxRight的宽度设置为100px。要求让这两个内部的块级元素在一行内显示，并且分布到容器的两端。

CSS代码如下所示：

#box{

width:400px; height:100px;

background-color:#cccccc;

}

#box .boxLeft{

width:150px; height:100px;

background-color:#ff5857;

float:left;

}

#box .boxRight{

width:100px; height:100px;

background-color:# 5857 ff;

float:right;

}

我们可以看到，在.boxRight对象上，我们添加了float:right的CSS属性，让这个块级元素发生了右浮动，则该元素跑到了容器的最右侧。下图为我们展示了这样的效果。

展示两个块级元素的左右浮动位置

浮动属性的使用结论：

若希望多个块级元素在一行内显示，则这几个块级元素都要具备float浮动属性。

二、清除浮动属性：

CSS技术使用clear属性来实现块级元素的清除浮动效果。

CSS技术使用clear属性设置清除浮动效果

该属性可以有下列取值：

• left，清除块级元素的左浮动效果。

• right，清除块级元素的右浮动效果。

• both，清除块级元素的两端浮动效果。

属性说明：根据上面的float属性的使用，我们可想而知，一个紧跟在具有浮动属性的块级元素后面的块级元素，即使它不想和它前面的块级元素在一行内显示，也会受到前面块级元素浮动属性的影响，被压在前面块级元素的下方。

解决这个问题，可以对不希望和前面块级元素在同一行显示的块级元素使用清除浮动属性。

下面让我们来看这个实例：

HTML代码如下所示：

<div id=”box”>

<div class=”boxLeft”></div>

<div class=”boxRight></div>

</div>

CSS代码如下所示（#box .boxRIght）：

#box .boxRight{

width:100px; height:100px;

background-color:# 5857ff;

clear:left;

}

因为.boxRight具备clear:left属性，所以即使.boxLeft使用了float:left属性，它们也仍旧分布在两行，不会在同一行显示。就好像没有过使用任何浮动效果似的。

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。

文章预告

结合前面所学的CSS知识，使用今天的浮动属性，可以做一个简单的导航栏。那么下一篇文章中，小海老师会带领大家一同利用最近的所学，做一个水平放置的导航栏。效果非常酷炫，希望正在学习前端开发的同学们千万不要错过。

、有float属性的元素会跑

代码：<div id="box1"></div>

<div id="box2"></div>

<div id="box3"></div>

CSS：div{ width: 50px; height: 50px; }

#box1{background: blue; float: left;}

#box2{ background: red;float: left; }

#box3{background: black;float: left; }

在浏览器中的样式：

从图中可以看出，div本为块级标签，本应各自占一行，但是添加浮动属性之后，都向左浮动，跑到了一排。

二、如果上一行没有float元素，那么float元素是跑不上去的

代码：<div id="box1"></div>

<div id="box2"></div>

<div id="box3"></div>

CSS：div{ width: 50px; height: 50px; }

#box1{background: blue;}

#box2{ background: red;float: left; }

#box3{background: black;float: left; }

从图中可以看出，div1没有floa属性，所以div2不能浮动上去；而div2有浮动属性，所以div3会浮动上来。

三、有float属性的元素是脱离文档流的，非浮动元素会忽略掉前面的浮动元素

代码：<div id="box1"></div>

<div id="box2"></div>

<div id="box3"></div>

CSS：div{ width: 50px; height: 50px; }

#box1{background: blue;float:left;}

#box2{ background: red;float: left; }

#box3{background: black;width:150px;height:100px; }

在浏览器中的样式：

从图中可以看出，div1和div2浮动在文档之上，div3忽略了div1和div2，div1和div2没有影响div3的位置。