css float元素的浮动属性

2012/11/26 19:10:14作者：佚名来源：网络

移动端

【实例介绍】

css float元素的浮动属性

浮动属性是css布局的最佳利器，可以通过不同的浮动属性值灵活地定位div元素．以达到灵活布局网页的目的。我们可以通过CSS的属性float使元素向左或向右浮动。也就是说，让盒子及其中的内容浮动到文档的右边或者左边。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

【基本语法】

fioat：none | left | right | inherit

【语法介绍】

none：默认值，元素不浮动，并会显示其在文本中出现的位置；
left：表示元素向左浮动；
right：表示元素向右浮动；
inherit：规定应该从父元素继承float属性的值，IE 8及以下的版本目前都不支持属性值“inherit”。

【实例代码】


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>float属性---没有设置任何浮动</title>
<style type="text/css">
body{
 margin:20px;
 font-family:Arial; font-size:14px;
 }
#father{
 background-color:#33bb00;
 border:5px solid #111111;
 padding:8px;    
 }
#father div{
 padding:15px;    
 margin:15px;     
 border:2px dashed #111111;
 background-color:#90baff;
 }
#father p{
 border:3px dashed #111111;
 background-color:#FFCC66;
 }
.son1{
/* 这里设置son1的浮动方式*/
}
.son2{
/* 这里设置son1的浮动方式*/
}
.son3{
/* 这里设置son1的浮动方式*/
}
</style>
</head>
<body>
 <div id="father">
  <div class="son1">box1</div>
  <div class="son2">box2</div>
  <div class="son3">box3</div>
  <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
 </div>
</body>
</html>

【代码分析】

上面的代码定义了4个<div>块，其中一个父块，另外3个是它的子块。为了便于观察，将各个块都加上了边框以及背景颜色，并且让body以及各个div有一定的margin值。如果3个div都没有设置任何浮动属性，在父盒子中，4个盒子各自向右伸展，竖直方向依次排列，效果如图所示。

元素的浮动属性float运行效果