CSS中的float浮动属性，一般用于标签对象（例如：<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签）的浮动布局，而浮动也就是我们常说的标签对象居左靠左和居右靠右）。同时float浮动属性一般只对块级元素有效。“块级元素你可以通俗的理解为占一行并且大小可以控制的元素”。
float的属性值：left（靠左浮动），right（靠右浮动），none（不使用浮动，为默认值）
float属性的使用案例：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.divcss5{ width:400px;padding:10px;border:1px solid #F00}
.divcss5_left{ float:left;width:150px;border:1px solid #00F;height:50px}
.divcss5_right{ float:right;width:150px;border:1px solid #00F;height:50px}
.clear{ clear:both}
</style>
</head>
<body>
<div class="divcss5">
<div class="divcss5_left">布局靠左浮动</div>
<div class="divcss5_right">布局靠右浮动</div>
<div class="clear"></div><!--清除float产生浮动-->
</div>
</body>
</html>
运行效果：
温馨提示：答案为网友推荐，仅供参考
第1个回答 2012-07-18
在CSS布局中定位的方式有两种，一种是使用相对定位，一种是使用绝对定位。另外还有一种浮动定位，可能在CSS中浮动不能叫做定位，但是在网页美工这一块，浮动也是定位的一种方式，而且使用频率高于上面两种，浮动定位就是使用的就是float。
所谓浮动定位就是将某一个层浮动起来。用div层布局的时候CSS默认是采用“普通流”的方式，普通流就是说当你这么写的时候：
<div id="div1"></div>
<div id="div1"></div>
<div id="div1"></div>
那么在网页中展现的方式就是所有的层从上往下顺序排列。
当你给某一个层加了浮动之后呢，那么这个层就脱离了普通流，这种浮动之后的层脱离普通流和使用绝对定位方式使层脱离普通流有一点区别就是，使用浮动脱离普通流的层还是占空间的，但是使用绝对定位脱离普通流的层是不占位置的。
举个列子可以这样解释：
假设你现在有两种纸，那么当你不对其做任何设置的时候我们按网页的显示效果排列着两种纸，那就是两张纸上下排列成一列，各有各的空间，这种就是普通流
当你对某下面的一张纸使用浮动的时候，假设我们使用float:left;那么下面的那张纸就会脱离普通流而浮动到上面那张纸的右边，这样两张纸的显示形式就是排列成一行。这就浮动了。
当你对下面那张纸使用绝对定位的时候，那么下面那张纸脱离普通流之后不是浮动到上面那张纸的右边，而是直接覆盖在上面那张纸的上面，那这样呢这两张纸就占一张纸的空间，这就是绝对定位脱离流的方式。
所谓浮动定位就是将某一个层浮动起来。用div层布局的时候CSS默认是采用“普通流”的方式，普通流就是说当你这么写的时候：
<div id="div1"></div>
<div id="div1"></div>
<div id="div1"></div>
那么在网页中展现的方式就是所有的层从上往下顺序排列。
当你给某一个层加了浮动之后呢，那么这个层就脱离了普通流，这种浮动之后的层脱离普通流和使用绝对定位方式使层脱离普通流有一点区别就是，使用浮动脱离普通流的层还是占空间的，但是使用绝对定位脱离普通流的层是不占位置的。
举个列子可以这样解释：
假设你现在有两种纸，那么当你不对其做任何设置的时候我们按网页的显示效果排列着两种纸，那就是两张纸上下排列成一列，各有各的空间，这种就是普通流
当你对某下面的一张纸使用浮动的时候，假设我们使用float:left;那么下面的那张纸就会脱离普通流而浮动到上面那张纸的右边，这样两张纸的显示形式就是排列成一行。这就浮动了。
当你对下面那张纸使用绝对定位的时候，那么下面那张纸脱离普通流之后不是浮动到上面那张纸的右边，而是直接覆盖在上面那张纸的上面，那这样呢这两张纸就占一张纸的空间，这就是绝对定位脱离流的方式。
第2个回答 推荐于2016-05-22
float是浮动，并不是定位，要详细说起来起码要一堂课也讲不完，简单举个例子：比如你在网页里面放置了10个div小框框，如果不浮动，不绝对定位，他们会从上到下，一行一个往下排列，如果你全部设置了float，在他们总宽度不超过网页宽度的情况下，他们可以全部横排在第一行本回答被提问者和网友采纳
第3个回答 2021-04-18
Vue实践-CSS样式position/display/float属性对比使用
第4个回答 2012-07-18
float不是定位，如果制作时遇到了问题，就说问题吧
相似回答