float，css的一种属性，主要属性值为：left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动），多用于网页排版。
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
扩展资料
CSS属性
1、整数和实数
在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3在CSS中将是不合法的。下面是几个正确的例子，整数：128、-313，实数：12.20、1415、-12.03。
2、长度量
相对长度单位有：em——当前字体的高度，也就是font.size属性的值；ex——当前字体中小写字母x的高度；Dx——一个像素的长度，其实际的长度由显示器的设置决定，比如在800木600的设置下，一个像素的长度就等于屏幕的宽度除以800。
3、百分数量（percentages）
百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。
参考资料来源：百度百科-CSS
参考资料来源：百度百科-FLOAT
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>四色空心圆环</title>
<style>
*{ padding:0margin:0font-size:14px }
/* 第一种 */
.wai{ width: 360pxheight: 360pxposition: relativemargin: 120px autoborder-radius: 50%overflow:hidden }
.nei{ width: 160pxheight: 160pxline-height:160pxtext-align:centerbackground-color: #FFFborder-radius: 50%position: absolutemargin: autoleft:0right:0top:0bottom:0 }
.wai .fx{ width: 100%height:100%position:absolutetransform:rotate(45deg) }
.top{ background: #FF00FFwidth: 180pxheight:180pxposition: absolutetop:0left:0 }
.right{ background: #7B4DB1width: 180pxheight:180pxposition: absolutetop:0right:0 }
.bottom{ background: #1AA260width: 180pxheight:180pxposition: absolutebottom:0right:0 }
.left{ background: #20647Dwidth: 180pxheight:180pxposition: absolutebottom:0left:0 }
/* 第二种 */
.ease{
width: 360pxheight: 360pxmargin: 120px autoborder:100px solid redborder-radius:50%overflow:hidden
box-sizing:border-boxline-height:160pxtext-align:center
border-top-color: #FF00FFborder-right-color: #7B4DB1border-bottom-color: #1AA260border-left-color: #20647D
}
</style>
</head>
<body>
<!-- 第一种 -->
<div class="wai">
<div class="fx">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
<div class="nei">Hello</div>
</div>
<!-- 第二种 -->
<div class="ease">Hello</div>
</body>
</html>
