Web前端入门浮动的深入理解

float
浮动定位是指:
将元素排除在普通流之外，即元素将脱离标准文档流;

元素将不在页面占用空间;

将浮动元素放置在包含框的左边或者右边;

浮动元素依旧位于包含框之内;
比如说：
让盒子下的元素左浮或者是右浮
（float:left;）
（float:right;）
下面我们带入一下数值,给盒子做一个宽高和背景颜色，接着给里面的li设置宽高颜色让div盒子下的li浮动

{
div{
width: 400px;
height: 400px;
background: blue;
}
li{
width: 100px;
height: 100px;
background: red;
}
.f-l{
float: left;
}
.f-r{
float: right;
}
   div这个盒子里面的li就会往整体随着所给数值的方向移动，移动到这个盒子的两边；

如图所示：

image.png