CSS定位与浮动的区别
在CSS中，定位（Positioning）和浮动（Floating）是两种不同的布局方式，它们各自有不同的特点和使用场景。
定位（Positioning）
定位是通过CSS的`position`属性来改变元素在页面上的布局位置。它可以将元素放置在页面上的任意位置，包括相对于其正常位置的偏移。定位有五种不同的值：`static`（默认值），`relative`，`absolute`，`fixed`和`sticky`。
静态定位：这是默认的定位方式，元素按照正常的文档流进行布局。
相对定位：元素相对于其正常位置进行定位，可以通过`top`，`right`，`bottom`和`left`属性来设置偏移量。
绝对定位：元素脱离正常的文档流，相对于其最近的已定位祖先元素进行定位。
固定定位：元素相对于浏览器窗口进行定位，不会随页面内容滚动。
粘性定位：当元素的顶部到达某个位置时，它的位置会被锁定，直到元素的底部离开该位置。
浮动（Floating）
浮动则是通过CSS的`float`属性来实现元素的左右排列。浮动的主要目的是为了让文本围绕图像排列，或者实现多栏布局。
浮动的特性：浮动元素会被从正常文档流中删除，但是还会占据一定的空间。这会导致父元素的高度塌陷，除非通过清除浮动来恢复父元素的高度。浮动元素周围的外边距不会被合并，而且会生成一个块级框，无论其原始元素类型是什么。
浮动的方向：浮动元素可以向左或向右浮动。
浮动的影响：浮动会影响文档的布局，使得其他内容会“环绕”浮动元素。
区别
1.元素位置的变化：定位可以将元素放置在页面上的任意位置，而浮动则是让元素沿着页面的边界移动。
2.对文档流的影响：定位元素只是改变了其在页面上的视觉位置，而浮动元素会完全脱离文档流。
3.高度计算：定位元素不会影响父元素的高度计算，而浮动元素会导致父元素高度塌陷，除非清除浮动。
4.与其他元素的关系：定位元素不会影响同一容器中其他元素的布局，而浮动元素会使其后的兄弟元素自动向上排列。
总的来说，定位更适合需要精确控制元素位置的复杂布局，而浮动更适合实现简单的左右排列或文本环绕图像的布局。在使用时，需要注意它们对文档流和父元素高度的影响，并通过清除浮动等方式来避免潜在的问题。
