CSS 文档流 & 浮动脱离文档流

CSS浮动脱离文档流是前端开发中的一个重要概念，为了深入理解这一概念，首先需要明确“文档流”的定义。

文档流

文档流（document flow），也被称为文档流布局（flow layout），是网页中用来排列和定位HTML元素的基本原则和机制。以下是关于文档流的详细解释：

1. 定义：文档流是指HTML文档中元素的自然流动方式。HTML元素在文档流中按照其出现的顺序依次排列，每个元素所占据的空间（包括内容、内边距和边框）被计算在内，相邻元素之间没有空隙。

2. 元素排列：

   • 块级元素（block elements）：在文档流中，块级元素会独占一行，从上到下依次排列。
   • 行内元素（inline elements）：在文档流中，行内元素会在同一行内从左到右依次排列，直到该行排满后才会换到下一行。

3. 影响因素：文档流受到CSS属性的影响，如display、position、float、clear等属性可以改变元素的默认文档流位置和尺寸。例如，设置position为absolute或fixed可以使元素脱离文档流，而使用float属性则可以让元素浮动到文档流的左侧或右侧。

浮动脱离文档流

在CSS中，浮动（float）是一种使元素脱离文档流并沿指定方向（左或右）浮动的布局方式。以下是关于浮动脱离文档流的详细解释：

1. 浮动效果：当一个元素被设置为浮动时，它会脱离文档流并沿指定方向浮动。浮动元素会“漂浮”在文档流的上方，而后续的非浮动元素则会继续按照文档流的规则排列。

2. 浮动特性：

   • 浮动元素不会占据其原本在文档流中的位置，因此会导致父元素的高度塌陷。
   • 浮动元素会相互堆叠，形成一层浮动层，而标准流元素则位于另一层。
   • 浮动元素周围的文本或内联元素会环绕着浮动元素排列。

3. 清除浮动：由于浮动元素会导致父元素高度塌陷，并可能影响后续元素的布局，因此需要清除浮动。清除浮动的方法有多种，如使用clear属性、设置父元素的overflow属性为hidden或使用伪元素等。

综上所述，CSS浮动脱离文档流是前端开发中的一个重要概念，它允许开发者通过浮动来灵活地定位页面元素并达到所需的布局效果。然而，在使用浮动时需要注意清除浮动以避免布局问题。