[分享]css做布局浮动跟定位区别

CSS（层叠样式表）是网页前端开发中必不可少的一部分，它能够帮助我们快速地实现网页的各种效果和功能。在CSS中，布局是一个非常重要的知识点，常用的布局方式有浮动和定位。浮动是指在网页中将某一个元素脱离...

CSS（层叠样式表）是网页前端开发中必不可少的一部分，它能够帮助我们快速地实现网页的各种效果和功能。在CSS中，布局是一个非常重要的知识点，常用的布局方式有浮动和定位。

浮动是指在网页中将某一个元素脱离正常文档流的布局方式。我们可以通过设置元素的float属性来实现浮动布局。在浮动布局中，元素通常会脱离文档流并向左或向右浮动。同时，元素的高度也会根据其子元素的高度自动调整。

.box {
  float: left;
  width: 50%;
} 

而定位是指将某一个元素在页面中精确定位的布局方式。我们可以通过设置元素的position属性和top、right、bottom、left属性来实现定位布局。在定位布局中，元素会脱离文档流，同时可以根据设置的属性值在页面上任意移动。

.box {
  position: absolute;
  top: 50px;
  left: 100px;
} 

总体来说，浮动布局适用于需要自适应宽度的元素，并且不会影响到其他元素的位置。而定位布局适用于需要精确控制位置的元素，并且在定位时可能会影响到其他元素的位置。在实际开发中，我们可能会同时使用多种布局方式来实现我们想要的效果。