目录
前言:
浮动布局（Float Layout）:
定位布局（Positioning Layout）:
1.传统布局:
1.1文档流布局:
1.1.1基本的布局方式:
1.1.2 块级元素:
1.1.3调整元素:
1.2浮动布局:
1.2.1浮动布局允许元素向左或向右浮动，使其周围的文本或其他元素环绕它。
1.2.2浮动元素会脱离正常的文档流，但仍然占据空间，并且会影响其他元素的布局。
1.2.3常用于实现多列布局、文本环绕图像等效果。
1.2.4需要注意清除浮动，以避免布局问题（如父元素高度塌陷）。
1.3定位布局:
1.3.1定住指定位置:
1.3.1相对定位：
1.3.1绝对定位：
2.目前主流的Flex布局（弹性盒模型）:
2.1lex布局:
2.2Flex布局基于两条轴进行布局：
2.3设置容器的 display 属性:
2.4Flex布局适用地方:
3.浮动篇:
3.1浮动的基本概念和用法:
3.1.1浮动方向：
3.1.2脱离文档流：
3.1.3边界行为：
3.2浮动的应用:
3.2.1图文环绕：
3.2.2水平布局：
3.3浮动的注意事项:
3.3.1父元素高度塌陷：
3.3.1元素重叠：
4.定位篇(position):
4.1定位的基本概念和用法:
4.1.1绝对定位（absolute）：
4.1.2相对定位（relative）：
4.2定位的方向和距离:
4.2.1定位元素的基本操作:
4.2.2定位元素的使用方法:
4.3父相子绝技巧:
4.3.1布局技巧:
4.3.2常用技巧:
4.5z-index属性:
结语:
前言:
今天我们来分享一下关于浮动布局和定位布局,以下是对二者的一个介绍:
浮动布局（Float Layout）:
浮动布局在CSS中是一种非常重要的布局技术，它允许元素沿着其容器的左侧或右侧浮动，同时其他内容会环绕它。浮动最初是为了实现文本环绕图像的效果而设计的，但随后它被广泛用于创建多列布局和各种复杂的页面布局。
当元素被设置为浮动时，它会脱离正常的文档流，但仍然会占据空间（即它会影响布局）。浮动元素之后的元素会围绕它流动，这种特性使得浮动布局在实现多栏布局时特别有用。然而，浮动布局也有一些挑战，比如清除浮动（clearing floats），以确保父元素能够正确地包含其浮动的子元素。
浮动布局的优点包括灵活性高、能够实现复杂的布局效果以及响应式设计。但缺点也很明显，比如需要额外注意清除浮动、布局容易受到外部因素影响等。
定位布局（Positioning Layout）:
定位布局是CSS中另一种强大的布局技术，它允许开发者将元素精确地放置在页面上的任何位置。定位布局基于坐标系统，其中元素的定位可以通过设置
top、right、bottom和left属性来控制。定位布局有两种主要类型：相对定位（relative positioning）和绝对定位（absolute positioning）。相对定位是相对于元素在文档流中的原始位置进行定位，而绝对定位是相对于最近的已定位祖先元素（即设置了
position属性为relative、absolute或fixed的元素）进行定位。如果没有已定位的祖先元素，绝对定位的元素将相对于初始包含块（通常是视口或页面）进行定位。定位布局的优点在于它能够提供精确的布局控制，使元素能够准确地出现在指定的位置。这种布局方式在实现需要精确对齐或重叠元素的复杂布局时特别有用。然而，定位布局也有一些缺点，比如需要额外注意定位上下文和层叠顺序（z-index）等问题。
1.传统布局:
1.1文档流布局:
1.1.1基本的布局方式:
这是最基本的布局方式，其中网页元素按照其在HTML代码中的顺序从上到下、从左到右进行排列。
1.1.2 块级元素:
块级元素（如 <div>, <p> 等）默认独占一行，而行内元素（如 <span>, <a> 等）则与其他行内元素并排显示。
1.1.3调整元素:
通过调整元素的 margin, padding, display, 和 line-height 等属性，可以控制元素在页面上的位置和外观。
1.2浮动布局:
1.2.1浮动布局允许元素向左或向右浮动，使其周围的文本或其他元素环绕它。
1.2.2浮动元素会脱离正常的文档流，但仍然占据空间，并且会影响其他元素的布局。
1.2.3常用于实现多列布局、文本环绕图像等效果。
1.2.4需要注意清除浮动，以避免布局问题（如父元素高度塌陷）。
1.3定位布局:
1.3.1定住指定位置:
通过设置元素的 position 属性为 relative（相对定位）或 absolute（绝对定位），可以将元素定位在指定位置。
1.3.1相对定位：
元素相对于其正常位置进行定位。即使移动了元素，它仍然占据其原始空间。
1.3.1绝对定位：
元素相对于最近的已定位祖先元素（或相对于初始包含块，如果没有已定位的祖先元素）进行定位。绝对定位的元素不占据空间，可以覆盖其他元素。
2.目前主流的Flex布局（弹性盒模型）:
2.1lex布局:
lex布局是一种现代的、灵活的布局方式，允许容器中的项目以各种方式进行对齐、方向和顺序的控制。
2.2Flex布局基于两条轴进行布局：
主轴（默认为水平方向）和交叉轴（默认为垂直方向）。
2.3设置容器的 display 属性:
通过设置容器的 display 属性为 flex 或 inline-flex，可以启用Flex布局。然后，可以使用各种Flex属性（如 flex-direction, flex-wrap, justify-content, align-items 等）来控制项目的布局和对齐方式。
2.4Flex布局适用地方:
Flex布局非常适合用于创建复杂的、响应式的布局，特别是当需要在不同屏幕尺寸和方向上保持布局的一致性时。
3.浮动篇:
3.1浮动的基本概念和用法:
3.1.1浮动方向：
float属性主要有两个值，left和right，分别表示元素向左浮动和向右浮动。
3.1.2脱离文档流：
浮动元素会脱离其正常的文档流位置，但仍然会占据空间（不同于绝对定位的元素，它们会从文档流中完全移除）。这意味着浮动元素后面的内容会围绕浮动元素流动。
3.1.3边界行为：
浮动元素会一直浮动，直到它遇到父元素的边界或其他浮动元素。如果一行内空间不足，浮动的元素会下移到下一行。
3.2浮动的应用:
3.2.1图文环绕：
这是浮动的原始用途，允许文本围绕图像流动。
3.2.2水平布局：
利用浮动可以很容易地实现水平排列的盒子布局。相较于行内块元素，使用浮动进行水平布局具有更好的性能和可控性。
3.3浮动的注意事项:
3.3.1父元素高度塌陷：
如果父元素只包含浮动元素，它可能会出现高度塌陷的情况，因为浮动元素不参与父元素的高度计算。解决这个问题的一种方法是使用“清除浮动”的技巧，例如添加一个空的块级元素并应用clear: both;样式。
3.3.1元素重叠：
由于浮动元素会脱离文档流，它们可能会与正常流中的其他元素重叠，需要特别注意。
4.定位篇(position):
4.1定位的基本概念和用法:
4.1.1绝对定位（absolute）：
元素会脱离正常的文档流，并且相对于其最近的已定位祖先元素（即设置了position属性为absolute、relative、fixed或sticky的元素）进行定位。如果没有已定位的祖先元素，它会相对于初始包含块（通常是视口或页面）进行定位。
4.1.2相对定位（relative）：
元素相对于它在正常文档流中的位置进行定位。即使移动了元素，它仍然占据其原始空间。这意味着其他元素不会填补它移动后留下的空间。
4.2定位的方向和距离:
4.2.1定位元素的基本操作:
定位元素可以通过top、right、bottom和left属性来指定其在各个方向上的偏移量。这些属性决定了元素相对于其定位上下文（对于绝对定位，是最近的已定位祖先元素；对于相对定位，是元素自身在正常文档流中的位置）的位置。
4.2.2定位元素的使用方法:
这些属性通常需要与定位类型（absolute或relative）一起使用才有效。单独设置这些属性而不设置定位类型通常不会产生任何效果。
4.3父相子绝技巧:
4.3.1布局技巧:
“父相子绝”是一种常见的布局技巧，其中父元素设置为相对定位，而子元素设置为绝对定位。这样，子元素会根据移动后的父元素的位置来定位自己，而不会受到其他元素的影响。
4.3.2常用技巧:
这种技巧在实现一些复杂的布局效果时非常有用，比如创建模态窗口、下拉菜单、提示框等。
4.5z-index属性:
当元素在页面上重叠时，可以使用z-index属性来控制它们的堆叠顺序。z-index值越大的元素在堆叠顺序中越靠上，因此会覆盖值较小的元素。
需要注意的是，z-index属性只对设置了定位（即position属性不为static）的元素有效。此外，具有相同z-index值的元素会按照它们在HTML代码中的顺序进行堆叠（后出现的元素会覆盖先出现的元素）。
结语:
今天的分享就先分享到这里了,这些内容都偏理论的知识了,不过学习就是这样需要持之以恒的坚持,莫道浮云遮蔽日,终有云开见日时。云城发韧,万里可期。我们一切的学习和努力无非是为了三个目标:'解释问题','解决问题','预测问题'。相信只要熬过这段低谷时光,自然会有未来的钟声敲响,我们是生生不息的火花,终将以灿烂为名,谢谢大家看到这里。
