css float元素的浮动属性|萝卜系统下载站

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

【实例介绍】

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运行效果

（1）、设置第1个浮动的div

下面将第一个div设置为浮动，在上面的代码中找到：
·sonl{
/*这里设置sonl的浮动方式*/
}

将．sonl盒子设置为向左浮动，代码如下：
·sonl{
/*这里设置sonl的浮动方式*/
float：left;
}

这时效果如图所示。可以看到box2的文字围绕着boxl排列，而此时浮动的盒子boxl的宽度不再延伸，其宽度为容纳内容的最小宽度。

设置第1个浮动的div运行效果