浮动（float）是CSS中用于布局的重要属性，它使元素脱离正常的文档流，并向左或向右移动，直到碰到另一个浮动元素或父元素的边界。
浮动的定义和作用
-
定义：浮动是通过设置
float属性使元素脱离正常的文档流，并移动到其父元素的最左边或最右边。 -
作用：浮动元素会生成一个块级框，任何元素都可以浮动，浮动后会使元素向左或向右移动，直到碰到包含块或另一个浮动框的边缘。块级框（block box），这意味着该元素将表现为一个块级元素，即使它原本是行内元素（如
<span>或<a>）。
浮动的特性
-
脱离文档流：浮动元素不再占据文档流中的位置，但仍影响周围元素的布局。
-
行内元素转化：浮动会将行内元素或行内块元素转化为块元素，使其可以设置宽高。
-
一行显示：多个浮动元素可以在一行内显示，直到父元素的宽度不足时才换行。
特别的，当浮动元素设置 margin-left: -100% 时，100% 的值是相对于其父元素的宽度计算的。这是因为浮动元素的宽度和边距都是相对于其包含块（通常是父元素）计算的。
原理
-
包含块：在CSS中，一个元素的尺寸和位置是相对于其包含块计算的。对于浮动元素，其包含块通常是其父元素。
-
百分比值：当使用百分比值（如
100%）时，它是相对于包含块的宽度计算的。因此，margin-left: -100%表示将元素向左移动其父元素宽度的100%。 -
浮动元素的行为：浮动元素会脱离文档流，但其尺寸和位置仍然受包含块的影响。通过设置负边距，可以使浮动元素移动到上一行的起始位置。
清除浮动
清除浮动，是指在CSS中使用特定的方法来解决浮动元素（使用float属性的元素）对布局的影响。浮动元素会脱离文档流，这可能导致父元素的高度无法自动适应其内容，出现高度塌陷现象。
为什么需要清除浮动？
-
高度塌陷：浮动元素的父元素无法自动伸展以包含浮动元素，导致内容溢出。
-
布局混乱：浮动元素可能覆盖其他元素或影响布局的正常显示。
清除浮动的常用方法
-
添加空元素法：
-
在浮动元素后添加一个空元素，如
<div class="clear"></div>，并设置.clear { clear: both; }。
-
-
使用
overflow属性：-
给浮动元素的父元素设置
overflow: hidden;或overflow: auto;，但注意可能出现滚动条。
-
-
使用伪元素法：
-
在父元素的CSS中添加
.parent:after { content: ''; display: block; clear: both; }。
-
-
设置高度法：
-
手动给父元素设置一个固定的高度，但不适用于高度不固定的情况。
-
注意，clear: both 是CSS中的一个属性，用于清除浮动元素对布局的影响。它的作用是确保元素位于其之前的所有浮动元素（无论是左浮动还是右浮动）的下方。
作用原理
-
清除浮动影响：当一个元素设置了
clear: both时，它会忽略之前的所有浮动元素（左浮动和右浮动），并且位于它们的下方。 -
元素定位：通过设置
clear: both，元素会自动增加上外边距，以确保它位于之前浮动元素的下方。 -
适用范围：
clear属性主要适用于块级元素（block元素），如果用于内联元素（inline或inline-block），则无效
