一、浮动（加了变成行内块元素）
CSS中的浮动（float）是一种布局技术，它允许元素脱离正常的文档流，使其向左或向右移动，直到其边缘触碰到包含块或另一个浮动元素的边缘。浮动元素仍然保留在文档流中，这意味着它们占据空间，但它们周围的元素会围绕它们进行布局。
以下是关于CSS浮动的一些关键点：
-
浮动属性 ：
float属性用于创建浮动元素，其值可以是left、right或none（默认值）。 -
文档流：浮动元素会脱离文档流，但它们仍然保留在文档的布局中，这意味着它们会推挤其他元素。
-
环绕文本：当浮动元素后面没有足够的空间时，文本会环绕在浮动元素的周围。
-
清除浮动 ：使用
clear属性可以清除浮动的影响，常用值有left、right、both，通常用于处理浮动元素后的布局问题。 -
浮动的副作用 ：浮动可能会导致布局问题，如父元素的高度塌陷（浮动元素不计算大小，撑不开盒子），因为浮动的子元素不再包含在父元素的计算高度内
。 -
现代布局技术：随着CSS的发展，现在有了更先进的布局技术，如Flexbox和Grid，它们提供了更强大的布局控制能力，并且可以避免使用浮动时遇到的一些问题。
浮动的使用示例：
注意权重：
javascript
浮动的使用示例：
.left-float {
float: left;
width: 50%;
}
.right-float {
float: right;
width: 50%;
}
HTML结构：
<div class="left-float">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="right-float">
<img src="image2.jpg" alt="Image 2">
</div>
在上面的例子中，两个div元素将向左和向右浮动，并且它们的宽度各占父元素宽度的50%。
清除浮动的示例：
.clear-float {
clear: both;
}
HTML结构：
<div style="overflow: auto;">
<div class="left-float">
<!-- Content -->
</div>
<div class="right-float">
<!-- Content -->
</div>
<div class="clear-float">
<!-- This div will clear the floats -->
</div>
</div>
在上面的例子中，.clear-float用于清除前面两个浮动元素的影响，确保父元素能够正确地包裹清除浮动
在CSS布局中，清除浮动（Clearing Floats）是一个重要的概念，特别是当你使用浮动（float）属性来布局元素时。浮动元素会脱离文档流，这可能会导致父元素的高度塌陷，即父元素的高度不能正确地包含其浮动的子元素。这通常发生在浮动元素是最后一个或几个子元素时，导致父元素的高度小于浮动元素的高度。
为了解决这个问题，你可以使用以下几种方法来清除浮动：
javascript
1. 使用clear属性
这是最传统的清除浮动的方法。clear属性可以设置在任何块级元素上，通常是一个新添加的空元素，用来清除前面的浮动元素。
.clear { clear: both; }
HTML结构：
<div style="overflow: auto;"> <div class="float-left">浮动元素1</div> <div class="float-left">浮动元素2</div> <div class="clear"></div> <!-- 清除浮动 --> </div>
2. 使用overflow属性
在父元素上设置overflow属性为auto或hidden可以触发BFC（块级格式化上下文），这将包含浮动元素，从而避免高度塌陷。
.container { overflow: auto; }
3. 使用::after伪元素
使用::after伪元素和clear属性可以清除浮动，同时避免了添加额外的空元素。
.container::after { content: ""; display: table; clear: both; }
HTML结构保持不变，但CSS中加入了::after伪元素的规则。
4. 使用flexbox
Flexbox布局可以自然地处理浮动问题，因为它会自动调整子元素的宽度和高度，以适应容器。
.container { display: flex; }
使用Flexbox时，通常不需要额外的清除浮动的方法。
5. 使用grid
CSS Grid布局同样可以避免浮动问题，因为它提供了一种新的布局方式，可以很好地控制元素的位置和尺寸。
复制
.container { display: grid; }为什么需要清除浮动？
清除浮动是为了确保布局的完整性和正确性。如果不清除浮动，可能会导致布局错乱，比如：
- 父元素的高度不正确，导致内容溢出或间隙。
- 非浮动元素的行为异常，比如文本环绕浮动元素的方式不正确。
选择哪种方法取决于你的具体布局需求和个人喜好。随着CSS布局技术的发展，清除浮动的需求可能会减少，因为Flexbox和Grid提供了更先进的布局解决方案。
二、CSS Flexbox（弹性盒子布局)
CSS Flexbox（弹性盒子布局）是一种用于构建复杂布局的CSS3模块。它提供了一种更加有效的方式来排列、对齐和分配容器内项目的空间，即使它们的大小是未知或者动态变化的。Flexbox 解决了传统布局方式中的一些常见问题，如垂直居中对齐。
以下是Flexbox的一些关键概念和属性：
基本概念
-
容器（Container） ：使用
display: flex;或display: inline-flex;声明的容器，可以是任何容器元素。 -
项目（Items）：容器内的直接子元素，自动成为弹性项目。
-
主轴（Main Axis）：默认从左到右，定义了项目排列的方向。
-
侧轴交叉轴（Cross Axis）：与主轴垂直，定义了项目在垂直方向上的排列方式。
-
伸缩性（Flexibility）：项目可以伸缩以适应可用空间。
主要属性
容器属性
- display ：设置为
flex或inline-flex，启用Flexbox布局。 - flex-direction：定义主轴的方向，可以是
row（默认）、row-reverse、column或column-reverse。 - flex-wrap ：定义项目是否换行，可以是
nowrap（默认，不换行）、wrap（换行，第一行在下方）、wrap-reverse（换行，第一行在上方）
。 - justify-content ：定义项目在主轴上的对齐方式，可以是
flex-start（默认，起始位置）、flex-end、center、space-between或space-around
。 - align-items：定义项目在交叉轴上的对齐方式，可以是
flex-start、flex-end、center、stretch（默认，拉伸以填满容器）或baseline。 - align-content ：定义多行项目在交叉轴上的对齐方式，类似于
justify-content，但用于多行。
项目属性
- order ：定义项目的排序顺序，数值越小，越靠前
。 - flex-grow：定义项目放大的比例，当容器有剩余空间时，项目可以增长。
- flex-shrink：定义项目缩小的比例，当容器空间不足时，项目可以缩小。
- flex-basis：定义项目在分配多余空间之前的默认大小。
- flex：
flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。（剩余空间） - align-self ：允许单个项目有与其他项目不同的交叉轴对齐方式
。
示例
javascript
容器样式
.flex-container {
display: flex;
flex-direction: row; /* 可以是row, row-reverse, column, column-reverse */
flex-wrap: wrap; /* 可以是nowrap, wrap, wrap-reverse */
justify-content: space-between;
align-items: center;
align-content: stretch; /* 多行时使用 */
}
项目样式
.flex-item {
order: 1; /* 项目排序 */
flex: 1; /* 简写形式，等同于flex-grow flex-shrink flex-basis */
align-self: stretch; /* 单个项目对齐 */
}
Flexbox的优势
简单性：Flexbox提供了一种更简单的方式，来创建灵活的响应式布局。
响应性：Flexbox可以很好地适应不同屏幕尺寸和设备。
对齐：Flexbox提供了多种对齐方式，可以轻松实现项目的水平和垂直居中。
空间分配：Flexbox可以轻松地分配空间，无论是在单个轴上还是两个轴上。
Flexbox是现代网页设计中非常强大的工具，它极大地简化了布局的复杂性，尤其是在处理响应式设计时。随着浏览器对Flexbox的支持越来越广泛，它已经成为构建灵活布局的首选方法之一。