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
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容