一、应用场景
- 文字环绕：通过将图片等元素设置为浮动，可以实现文字围绕该元素排列的效果，增强页面的排版美感和可读性。例如，在一篇文章中，将图片左浮动，文字就会自动环绕在图片周围。
<style>
.sidebar img {
float: right;
margin-left: 10px;
}
</style>
<div class="sidebar">
<img src="advertisement.jpg" alt="广告图片">
<p>这里是侧边栏的文字内容。广告图片右浮动后，文字会自动环绕在图片左侧，既不影响广告的展示，又能保持页面的整洁和美观。</p>
</div>- 横向排列：可以使多个元素在同一行上横向排列，方便进行布局设计。比如，将多个按钮设置为浮动，可以让它们在一行上显示，节省页面空间。
二、float 属性值
left：左浮动，元素靠上靠左排列。当一个元素设置为左浮动时，它会尽可能地向左移动，直到碰到包含块的边界或者其他浮动元素。right：右浮动，元素靠上靠右排列。同理，右浮动元素会尽可能地向右移动，直到碰到包含块的边界或者其他浮动元素。- 默认值：
none，即不浮动。当元素的float属性为默认值时，它会按照常规流的方式进行排列。
三、浮动元素的特性
（一）块盒特性
当一个元素浮动后，它必定变为块盒，就像设置了display: block;一样。这意味着它可以设置宽度、高度、边距等块级元素的属性。例如，可以为浮动元素设置明确的宽度和高度，以控制其大小。
（二）包含块
浮动元素的包含块和常规流一样，是父元素的内容盒。这决定了浮动元素在页面中的位置范围。如果父元素的尺寸发生变化，浮动元素的位置也会相应地调整。
（三）盒子尺寸特性
- 宽度为
auto时，适应内容宽度。这意味着如果浮动元素内部的内容较少，它的宽度会自动收缩以适应内容；如果内容较多，它会根据内容的宽度进行扩展。 - 高度为
auto时，与常规流一致，适应内容高度。即浮动元素的高度会根据其内部的内容自动调整。 margin为auto时，为 0。这意味着如果不明确设置边距，浮动元素的边距会自动设置为 0。- 边框、内边距和百分比设置与常规流一致。可以像常规流元素一样为浮动元素设置边框和内边距，并且百分比设置也会按照相同的规则进行计算。
四、盒子排列
（一）浮动盒子的排列
- 左浮动的盒子靠上靠左排列，右浮动的盒子靠上靠右排列。这样可以实现多个浮动元素在不同方向上的有序排列。
- 浮动盒子在包含块中排列时，会避开常规流块盒。这意味着常规流块盒不会与浮动盒子重叠，而是会在浮动盒子的周围进行排列。
（二）常规流块盒的排列
常规流块盒在排列时，无视浮动盒子。常规流块盒会按照自己的方式进行排列，不会因为浮动盒子的存在而改变位置。
（三）行盒的排列
行盒在排列时，会避开浮动盒子。行盒中的文字等内容会自动调整位置，以避免与浮动盒子重叠。如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒称为匿名行盒。
五、高度坍塌问题及解决方法
（一）高度坍塌的根源
常规流盒子的自动高度，在计算时，不会考虑浮动盒子。这就导致当父元素内部包含浮动元素时，父元素的高度可能无法正确地根据子元素的内容进行调整，从而出现高度坍塌的问题。
（二）使用:after伪元素解决高度坍塌
可以利用 CSS 的:after伪元素来解决高度坍塌问题。具体做法如下：
.clearfix:after {
content: "";
display: table;
clear: both;
}然后将这个类应用到包含浮动元素的父元素上：
代码语言：javascript复制<div class="parent clearfix">
<div class="float-left">左浮动元素</div>
<div class="float-right">右浮动元素</div>
</div>这样，:after伪元素会在父元素的内容之后插入一个新的元素，这个元素会清除浮动，从而使父元素的高度能够正确地包含浮动元素。
这种方法的优点是简单易用，不需要在 HTML 结构中添加额外的元素。同时，它也可以避免一些使用其他方法可能出现的问题，如清除浮动元素的边距问题等。
总之，使用:after伪元素是一种有效的解决高度坍塌问题的方法，可以确保页面布局的稳定性和正确性。
