<!-- <style>
div{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
/* 浮动 */
float: left;
}
.box2{
background-color: pink;
/* 浮动 */
float: left;
}
.box3{
background-color: orange;
/* 浮动 */
float: left;
}
.box4{
background-color: green;
/* 浮动 */
float: left;
}
.box5{
width: 500px;
height: 300px;
background-color: greenyellow;
}
</style> -->
<!--
网页中有很多布局效果,标准的布局方式没法完成,使用浮动改变元素的默认排列方式。
浮动:
浮动可以让元素【脱离文档流】,【按照指定的方向进行排列】,直到遇到父元素的边界或另外一个浮动元素【停止】。
标准文档流:块级盒子垂直排列,行级盒子水平排列
脱离文档流:
语法:
float
取值:
left 左浮动
right 右浮动
none 不浮动
-->