我不会在这里详细解释浮点数的工作原理，因为这个问题通常集中在“ 为什么要使用
clear: both;OR或到底有什么作用”方面
clear: both;。
我将简单，直截了当地回答这个问题，并以图形方式向您解释为什么
clear: both;需要这样做或做什么……
通常，设计人员将元素向左或向右浮动，从而在另一侧创建一个空白空间，该空间允许其他元素占用剩余空间。
为什么它们浮动元素？
当设计人员并排需要2个块级元素时，元素将浮动。例如说我们要设计一个基本的网站，其布局如下图所示。
演示图像的实时示例。
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}header, footer { border: 5px solid #000; height: 100px;}aside { float: left; width: 30%; border: 5px solid #000; height: 300px;}section { float: left; width: 70%; border: 5px solid #000; height: 300px;}.clear { clear: both;}<!-- HTML --><header> Header</header><aside> Aside (Floated Left)</aside><section> Content (Floated Left, Can Be Floated To Right As Well)</section><!-- Clearing Floating Elements--><div ></div><footer> Footer</footer>
注意： 您可能必须添加
header，footer，aside，section（和其他HTML5元素）为
display: block;您的样式表明确提的是，元素是块级元素。
说明：
我有一个基本布局，1个标题，1个侧边栏，1个内容区域和1个页脚。
没有浮动
header，下一个是
aside我将用于网站侧边栏的标签，因此我将元素向左浮动。
注意：默认情况下，块级元素占用文档100％的宽度，但是向左或向右浮动时，它将根据其持有的内容调整大小。
- 块级元素的正常行为
块级元素的浮动行为
因此，正如您所注意到的，左侧浮动div的空间留给右侧的空间未使用，这将使div后面的空间移动剩余空间。div如果未浮动，则将一个接一个地渲染
- div 如果向左或向右浮动，将彼此并排移动
好的，这就是块级元素向左或向右浮动时的行为，那么现在为什么是clear: both;必需的，为什么呢？
因此，如果您在布局演示中注明-如果您忘记了，就在这里。
我使用的是所谓的类.clear，它拥有一个名为属性clear与值both。因此，让我们看看它为什么需要both。
我已经漂浮aside和section元素的左侧，所以假设一个场景，在这里我们有一个游泳池，那里header是坚实的土地，aside并section在泳池漂浮和页脚再次坚实的土地，这样的事情..
因此，蓝色的水不知道浮动元素的面积是多少，它们可以大于池的面积，也可以小于池的面积，因此出现了一个使90％的CSS初学者感到困扰的常见问题：为什么容器元素的背景没有拉伸当它包含浮动元素时。这是因为容器元素在这里是一个POOL，而POOL不知道有多少个对象在浮动，或者浮动元素的长度或宽度是多少，因此它根本不会拉伸。
- 文件的正常流动
- 剖面向左浮动
- 清除浮动元素以拉伸容器的背景色
（请参阅此答案的[Clearfix]部分，以获取整洁的方法。我div有意使用一个空示例进行说明）
我在上面提供了3个示例，第一个是普通文档流，其中red背景将按预期方式呈现，因为容器不包含任何浮动对象。
在第二个示例中，当对象向左浮动时，容器元素（POOL）将不知道浮动元素的尺寸，因此不会拉伸到浮动元素的高度。
使用后clear: both;，容器元素将被拉伸到其浮动元素的尺寸。
使用的另一个原因clear: both;是为了防止元素在剩余空间中向上移动。
假设您要并排放置2个元素，并在其下面放置另一个元素…因此，您需要将2个元素向左浮动，而您要在其下面放置另一个元素。
- div向左浮动导致section进入剩余空间
- div清除浮动，以便section标记将在浮动divs 下方呈现
