css布局的漂浮

css布局的漂浮（不怎么用，了解一下，也写不到）

用到float属性：有两个属性值：

none：默认值。对象不漂浮。

left : 文本流向对象的右边。

right : 文本流向对象的左边。

例1：

//漂浮.html

<html>

<head>

div{

width: 200px;

height:100px;

border: 2px solid blue;

}

#div1{

float:left; //第一个漂浮到左边。效果就是：第一个

}

</style>

</head>

<body>

<div id="div1">AAAAAAAAAAAAA</div>

<div id="div2">BBBBBBBBBBBBBB</div>

<div id="div3">CCCCCCCCCCCCCC</div>

</body>

</html>

效果：

css布局的漂浮

解释：

div标签的特点是自动换行。

正常情况下，div1,div2,div3是依次从上往下排列。这就是一个文本流。

当给第一个div设置成left之后，会把它自己的内容居左，它后面的内容居右。即把div2放到div1的右面。

div2走了之后，空出来的位置，div3补上。