HTML5中div布局的float属性
今天在看div布局的时候讲到了利⽤float属性来实现元素的浮动，⼀开始搞得不是很明⽩，现总结如下：
⽆论如何，div是⼀种块元素，每个元素铁定会占⼀⾏，⽆论当前⾏是否已经⽤完了，也就是所谓的“流”的概念例如：
<div id="container">
<div id="b1">1号块</div>
<div id="b2">2号块</div>
<div id="b3">3号块</div>
<div id="b4">4号块</div>
</div>
样式：
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;
html里的float是什么意思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必须以英⽂字母开头，否则识别不到。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。