Hellow大家好！我们今天来学习浮动啦，这是一个非常简单且经常使用的样式哦，还是那句话勤加练习哈！
来看代码！
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
<div></div>
<div></div>
<div></div>
<div></div>
因为他是快元素嘛所以独占一行，排成了四个竖着的方块
我给他添加浮动元素来看一下
tyle>
div{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
<div></div>
<div></div>
<div></div>
<div></div>
这个float啊能控制元素像指定位置排列，这个属性值为left，如果是right那就是向右排列啦
我们换成四个大小不一的方块再试一下
.one{
width: 100px;
height: 100px;
border: 1px solid red;
}
.two{
width: 120px;
height: 120px;
border: 1px solid blue;
}
.three{
width: 80px;
height: 80px;
border: 1px solid green;
}
.four{
width: 120px;
height: 80px;
border: 1px solid pink;
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
我们接着来看四个大小不一颜色不一的方块能不能完成浮动呢！
.one{
width: 100px;
height: 100px;
border: 1px solid red;
}
.two{
width: 120px;
height: 120px;
border: 1px solid blue;
}
.three{
width: 80px;
height: 80px;
border: 1px solid green;
}
.four{
width: 120px;
height: 80px;
border: 1px solid pink;
}
div{
float: left;
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
答案当然也是可以的啦！浮动在用于排列整行元素的时候用的比较多一点
本次的更新就到这里啦，点个关注再走哦！
