CSS系列——CSS深入理解之absolute定位与float浮动的区别与联系

CSS系列——CSS深入理解之absolute定位与float浮动的区别与联系

写在前面

本篇将要介绍的绝对定位absolute属性和此前介绍的CSS系列——CSS深入理解之float浮动有着几分的相似性，可以认为两者是兄弟关系，都具有“包裹性”、“高度塌陷”、“块状化”的特性，它们在很多场合都可以互相替代。很多人可能有这样的疑问：一个属性名是“position”，一个属性名是“float”，属性名上一个表示“定位”，一个表示“浮动”，为什么这两个属性会具有如此相似性，甚至在某些场景中相互替代呢？CSS永远是引领网页设计的一把利刃，随着CSS版本的迭代与新技术的革新，本篇CSS系列文章的目的就是让读者更深入理解CSS，以此来提升自己的前端开发水平与网页设计水平。

absolute定位与float浮动的相似性

1、 包裹性

包裹性是指父元素可以包裹子元素，子元素的定位不会影响父元素的布局。absolute定位和float浮动都具有包裹性，即absolute定位和float浮动都可以将元素从其正常位置中脱离出来，并将其放置在父元素的任何位置。但是，absolute定位的元素脱离父元素的正常文档流后，会创建一个新的块级上下文，而float浮动的元素脱离父元素的正常文档流后，不会创建一个新的块级上下文。

2、 高度塌陷

高度塌陷是指元素的高度为0，但元素仍然占据空间。absolute定位和float浮动都具有高度塌陷的特性，即absolute定位和float浮动都可以将元素的高度设置为0，但元素仍然占据空间。

3、 块状化

块状化是指元素表现为一个块级元素。absolute定位和float浮动都具有块状化的特性，即absolute定位和float浮动都可以将元素表现为一个块级元素。但是，absolute定位的元素脱离父元素的正常文档流后，会创建一个新的块级上下文，而float浮动的元素脱离父元素的正常文档流后，不会创建一个新的块级上下文。

absolute定位与float浮动的区别

1、 定位方式

absolute定位的元素是相对于其父元素进行定位的，而float浮动的元素是相对于其包含块进行定位的。absolute定位的元素可以从其正常位置中脱离出来，并将其放置在父元素的任何位置，而float浮动的元素只能从其正常位置中脱离出来，并将其放置在另一个元素的旁边。

2、 是否创建新的块级上下文

absolute定位的元素脱离父元素的正常文档流后，会创建一个新的块级上下文，而float浮动的元素脱离父元素的正常文档流后，不会创建一个新的块级上下文。

3、 应用场景

absolute定位和float浮动都可以在各种各样的场景中使用，但它们也有各自的优势和劣势。absolute定位更适合用于创建弹出式窗口、模态框和工具提示等元素，而float浮动更适合用于创建侧边栏、导航栏和页脚等元素。

结语

absolute定位和float浮动都是CSS中的布局属性，它们都具有“包裹性”、“高度塌陷”和“块状化”的特性，它们在很多场合都可以互相替代。absolute定位和float浮动都具有自己的特点，absolute定位可以将元素从其正常位置中脱离出来，并将其放置在页面中的任何位置，而float浮动则可以将元素从其正常位置中脱离出来，并将其放置在另一个元素的旁边。此外，absolute定位和float浮动都可以被用于创建各种各样的布局，例如，绝对定位可以被用于创建弹出式窗口，而浮动则可以被用于创建侧边栏。