一、应用场景

1. 文字环绕：通过将图片等元素设置为浮动，可以实现文字围绕该元素排列的效果，增强页面的排版美感和可读性。例如，在一篇文章中，将图片左浮动，文字就会自动环绕在图片周围。

  <style>
   .sidebar img {
      float: right;
      margin-left: 10px;
    }
  </style>
 <div class="sidebar">
    <img src="advertisement.jpg" alt="广告图片">
    <p>这里是侧边栏的文字内容。广告图片右浮动后，文字会自动环绕在图片左侧，既不影响广告的展示，又能保持页面的整洁和美观。</p>
  </div>

2. 横向排列：可以使多个元素在同一行上横向排列，方便进行布局设计。比如，将多个按钮设置为浮动，可以让它们在一行上显示，节省页面空间。

二、float 属性值

1. left：左浮动，元素靠上靠左排列。当一个元素设置为左浮动时，它会尽可能地向左移动，直到碰到包含块的边界或者其他浮动元素。
2. right：右浮动，元素靠上靠右排列。同理，右浮动元素会尽可能地向右移动，直到碰到包含块的边界或者其他浮动元素。
3. 默认值：none，即不浮动。当元素的float属性为默认值时，它会按照常规流的方式进行排列。

三、浮动元素的特性

（一）块盒特性

当一个元素浮动后，它必定变为块盒，就像设置了display: block;一样。这意味着它可以设置宽度、高度、边距等块级元素的属性。例如，可以为浮动元素设置明确的宽度和高度，以控制其大小。

（二）包含块

浮动元素的包含块和常规流一样，是父元素的内容盒。这决定了浮动元素在页面中的位置范围。如果父元素的尺寸发生变化，浮动元素的位置也会相应地调整。

（三）盒子尺寸特性

1. 宽度为auto时，适应内容宽度。这意味着如果浮动元素内部的内容较少，它的宽度会自动收缩以适应内容；如果内容较多，它会根据内容的宽度进行扩展。
2. 高度为auto时，与常规流一致，适应内容高度。即浮动元素的高度会根据其内部的内容自动调整。
3. margin为auto时，为 0。这意味着如果不明确设置边距，浮动元素的边距会自动设置为 0。
4. 边框、内边距和百分比设置与常规流一致。可以像常规流元素一样为浮动元素设置边框和内边距，并且百分比设置也会按照相同的规则进行计算。

四、盒子排列

（一）浮动盒子的排列

1. 左浮动的盒子靠上靠左排列，右浮动的盒子靠上靠右排列。这样可以实现多个浮动元素在不同方向上的有序排列。
2. 浮动盒子在包含块中排列时，会避开常规流块盒。这意味着常规流块盒不会与浮动盒子重叠，而是会在浮动盒子的周围进行排列。

（二）常规流块盒的排列

常规流块盒在排列时，无视浮动盒子。常规流块盒会按照自己的方式进行排列，不会因为浮动盒子的存在而改变位置。

（三）行盒的排列

行盒在排列时，会避开浮动盒子。行盒中的文字等内容会自动调整位置，以避免与浮动盒子重叠。如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒称为匿名行盒。

五、高度坍塌问题及解决方法

（一）高度坍塌的根源

常规流盒子的自动高度，在计算时，不会考虑浮动盒子。这就导致当父元素内部包含浮动元素时，父元素的高度可能无法正确地根据子元素的内容进行调整，从而出现高度坍塌的问题。

（二）使用:after伪元素解决高度坍塌

可以利用 CSS 的:after伪元素来解决高度坍塌问题。具体做法如下：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

然后将这个类应用到包含浮动元素的父元素上：

<div class="parent clearfix">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
</div>

这样，:after伪元素会在父元素的内容之后插入一个新的元素，这个元素会清除浮动，从而使父元素的高度能够正确地包含浮动元素。

这种方法的优点是简单易用，不需要在 HTML 结构中添加额外的元素。同时，它也可以避免一些使用其他方法可能出现的问题，如清除浮动元素的边距问题等。

总之，使用:after伪元素是一种有效的解决高度坍塌问题的方法，可以确保页面布局的稳定性和正确性。