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; }

结果如下:

HTML5中div布局的float属性_第1张图片

如果一个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;
}

效果如下:

HTML5中div布局的float属性_第2张图片
如果将连续的两个块设为浮动的话,他们都将和流中的上一个元素的下边沿对齐,并且靠后的那个浮动元素(假设两个浮动元素都是向左浮动的)会靠在前面那个元素的左边。如果空间不够,则会被挤向下一行。
比如:

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):


HTML5中div布局的float属性_第3张图片

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

你可能感兴趣的:(Web程序设计)