标准流
CSS标准流（CSS normal flow）是指在HTML文档中，元素按照其在文档中出现的顺序进行自然布局的方式。大家都堆过积木吧，堆的过程中是按照从下到上，先搭建地基，然后再慢慢延申到上面，对比css基本上是相同的，但是搭建的顺序变了一下，现在是从上到下。这就像大家写作文一样，一般都是先写题目，写主题，然后分段落写其他内容。标准流指的就是按照文档中先后顺序进行布局。如果在html语句中先写一个div，那么这个div就在标准流的上方显示。
示例：多个div嵌套书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
.head{
background-color: pink;
}
.contain{
background-color: blue;
}
.footer{
background-color: antiquewhite;
}
.contain div:nth-child(1){
background-color: blueviolet;
}
.contain div:nth-child(2){
background-color:white;
}
</style>
</head>
<body>
<div class="head">
123
</div>
<div class="contain">
456
<div>
    abc
</div>
<div>
    efg
</div>
</div>
<div class="footer">
789
</div>
</body>
</html>
按照html中的书写顺序，进行排列，当人修改对应的元素属性，也可以达到其他效果。
浮动
为什么需要浮动？
在实际开发中，当我们想要实现很多布局效果，但是标准流无法实现，所以此时就需要使用浮动来增加显示效果。
举例：
当我们需要一个左侧图片右侧文字的效果时，你会怎么做？
使用行内块元素也可以解决上面的情况，那这种呢？图片在右侧，文字在左侧。
浮动写法：float:属性值;
| 属性值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动（默认值） |
浮动特性
1.使用浮动会脱离标准流（脱标）
即元素不再按照文档流中的默认布局进行排列。浮动元素可以向左或向右移动，直到遇到父元素的边界或其他浮动元素为止。
当一个元素设置了浮动属性后，它会尽可能地靠近父元素的左侧或右侧，在父元素内部形成一个文本环绕的效果，其周围的其他元素会重新排列以适应浮动元素的位置。
元素脱标容易引发下面的这些问题
-
父元素塌陷：如果父元素没有设置高度或包含的内容没有清除浮动，父元素的高度将无法正确计算，导致塌陷
-
元素重叠：如果多个浮动元素在同一行并且宽度超出父元素的宽度，这些元素可能会相互重叠。
-
文字环绕错乱：如果浮动元素与文本元素相邻，文本可能会受到浮动元素的影响而错位或环绕混乱。
-
清除浮动问题：为了解决父元素塌陷和保证页面布局的正确性，需要通过清除浮动的方式来规避问题。
2.浮动的位置
浮动元素仍旧会位于父元素之内。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.first{
width: 300px;
height: 300px;
background-color: pink;
}
.second{
width: 200px;
height: 200px;
background-color: purple;
}
.second-son{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.second-litterson{
width: 100px;
height: 100px;
background-color: brown;
}
</style>
</head>
<body>
<div class="first">
123
</div>
<div class="second">
<div class="second-son"></div>
<div class="second-litterson">happy happy!</div>
</div>
<div style="width: 100px; height: 100px; background-color: black;"></div>
</body>
</html>
代码分析：
3个大的div盒子，第二个盒子中有两个小盒子，一个设置浮动，一个没有设置，设置浮动的脱离标准流显示在父盒子左侧(float:left)此时不占有原来位置，后面的棕色盒子显示第二个盒子开始位置。并且红色盒子是覆盖一部分棕色盒子，棕色盒子的文字围绕红色盒子展示。
浮动的元素对后面与父类同级的元素没影响。因为父类没设置浮动。只有当改浮动元素超出父类盒子时，会影响后面的元素显示。
3.浮动更改元素的显示方式
浮动可以改变元素的显示方式，把它从默认的块级元素变成行内块级元素。这是因为浮动元素在布局时会脱离文档流，并且尺寸会自适应内容，因此会出现不同于默认情况下的框类型。另外，浮动元素在与文本混排时，其高度也会自适应内容，而不是默认的单行高度。
4.浮动元素掉落
多个浮动元素在同一行浮动时，当元素宽度大于父盒子宽度，浮动元素会在下一行按浮动类型显示
清除浮动
1.使用空的 <div> 元素进行清除： 在浮动元素的末尾添加一个空的 <div> 元素，并为其设置 clear: both; 样式属性。这将在浮动元素下方创建一个空白元素，使得父容器能够正确地包围浮动元素。
<div style="clear: both;"></div>
2.使用伪元素进行清除(推荐使用)： ::after 伪元素为父容器添加一个空的块级元素，并应用 clear: both; 样式属性。这种方法可以避免额外的HTML元素。
.clearfix::after {
content: "";
display: table;
clear: both;
}
将 .clearfix 类样式应用于包含浮动元素的父容器。
3.使用 clearfix 类进行清除： 定义一个 clearfix 类，并应用于包含浮动元素的父容器。通过在父容器上添加 clearfix 类，将自动清除浮动。
.clearfix {
clear: both;
}
<div class="clearfix">
<!-- 浮动元素 -->
</div>
4.使用 overflow 属性进行清除： 将父容器的 overflow 属性设置为 auto 或 hidden。这将创建一个新的BFC（块格式化上下文）来包含浮动元素。
.parent-container {
overflow: auto; /* 或者使用 overflow: hidden; */
}
这里贴一篇大佬的博客，要是读者没看明白可以看一下这个：
在使用浮动时，需要时刻保持注意，确保正确地应用它并避免它带来的负面影响。同时，选择合适的清除浮动方法也是非常关键的。通过本文的介绍，希望读者能够更好地理解和掌握CSS中浮动的应用方法和技巧，从而提高Web开发的效率。
扫一扫
1715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
