HTML5中div布局的float属性

今天在看div布局的时候讲到了利用float属性来实现元素的浮动，一开始搞得不是很明白，现总结如下：

无论如何，div是一种块元素，每个元素铁定会占一行，无论当前行是否已经用完了，也就是所谓的“流”的概念
例如：

    
1号块
    
2号块
    
3号块
    
4号块

样式：
div#container{
    background-color: grey;
    width: 100%;
    height: 200px;
}
div#b1{
    width: 50px;
    height: 50px;
    background-color: red;
}
div#b2{
    width: 50px;
    height: 50px;
    background-color: aquamarine;
}
div#b3{
    width: 50px;
    height: 50px;
    background-color: blueviolet;
}
div#b4{
    width: 50px;
    height: 50px;
    background-color: yellow;
}

结果如下：

如果一个div块被设为浮动的话，它将脱离这个流，自主地去填充这个区域，去靠到最左边或者最右边
比如讲2号块设为向左浮动，为了醒目，将3号块的长度变长了

div#container{
    margin: 0px;
    background-color: grey;
    width: 100%;
    height: 500px;
}
div#b1{
    width: 50px;
    height: 50px;
    background-color: red;
}
div#b2{
    width: 50px;
    height: 150px;
    background-color: aquamarine;
    float: left;
}
div#b3{
    width: 50px;
    height: 250px;
    background-color: blueviolet;
}
div#b4{
    width: 50px;
    height: 50px;
    background-color: yellow;
}

效果如下：

如果将连续的两个块设为浮动的话，他们都将和流中的上一个元素的下边沿对齐，并且靠后的那个浮动元素（假设两个浮动元素都是向左浮动的）会靠在前面那个元素的左边。如果空间不够，则会被挤向下一行。
比如：

div#container{
    margin: 0px;
    background-color: grey;
    width: 100%;
    height: 500px;
}
div#b1{
    width: 50px;
    height: 50px;
    background-color: red;
}
div#b2{
    width: 50px;
    height: 150px;
    background-color: aquamarine;
    float: left;
}
div#b3{
    width: 50px;
    height: 250px;
    background-color: blueviolet;
    float: left;
}
div#b4{
    width: 50px;
    height: 250px;
    background-color: yellow;
}

效果图如下（为了不被挡住，将4号块的长度伸长为250Px）：

当然，也可以向右浮动。这样的话，排在前面的元素会更靠右，后面的元素会更靠左。
还有一点要注意，就是元素的id必须以英文字母开头，否则识别不到。