浮动定位是css排版中非常重要的手段。浮动的框可以左右移动，直到外边缘碰到包含框或另一个浮动的边框。因为浮动框不在文档的普通流中，所以文档流中的块框表现的像浮动框不存在一样。
float的属性：
none 不浮动 默认
left 左浮动 文本或图像会移至父元素的左侧
right 右浮动 文本或图像会移至父元素的右侧
普通文档流的css样式如下：
#box{
width:650px;
border:solid;/*边框实线*/
}
#left{
background-color:red;
height:150px;
width:150px;
margin:10px;
}
#main{
background-color:greenyellow;
height:150px;
width:150px;
margin:10px;
}
#right{
background-color:pink;
height:150px;
width:150px;
margin:10px;
}
效果如图
当把left向右浮动时，它将脱离文档流并且向右移动，直到其边缘碰到包含框你box的右边框为止
在left DIV中添加float:right;//设置右浮动
右浮动效果
当把left框向左浮动时，它将脱离文档流并且向左移动，直到其边缘碰到包含box的左边框为止。因为不在处于文档流中，所以它将不占据空间，实际上覆盖了main框，使main框从左实图中消失。注意看第二个框内文字有重叠
在left DIV中添加
float;left;//设置左浮动
左浮动效果
当把3个框都向左浮动时，left框将向左浮动直到碰到box的左边框为止，另外两个框向左浮动直到碰到前一个浮动框为止
3个框都左浮动
上图可知box包含框太窄，无法容纳水平排列的3个浮动元素，那么其他浮动框将下移动，直到有足够的空间
网友评论