一、float布局的基本概念 float布局是指将元素从正常的文档流中脱离出来，使其能够向左或向右浮动。当我们设置一个元素的float属性值为left或right时，该元素就会向左或者向右浮动，直到它的外边缘碰到了包含它的容器框或另一个浮动框的边缘为止。
二、float布局的使用方法
- 设置float属性值 在CSS样式表中，我们可以通过设置float属性值来实现float布局。例如：
div{ float: left; }
- 清除浮动 由于浮动元素会使得父元素高度塌陷，因此我们需要清除浮动以保证页面的正常显示。常用的清除浮动的方法有以下几种：
（1）使用clear属性 在浮动元素下方添加一个空元素，然后给空元素添加clear属性，如下所示：
<div style="clear:both;"></div>
（2）使用overflow属性 给父级元素添加overflow属性，如下所示：
.parent{ overflow: hidden; }
（3）伪元素清除浮动 通过在父级元素中添加一个“after”伪元素，并设置其为clear属性，可以实现清除浮动的效果，如下所示：
.parent:after{ content:""; display:block; clear:both; }
三、float布局的注意事项
- 容器高度塌陷问题 当我们将多个元素设置为float布局时，可能会导致它们所在的容器高度塌陷。因此，在使用float布局时，我们需要注意及时清除浮动以保证页面正常显示。
- 元素之间的间距问题 在float布局中，由于元素是浮动的，因此它们之间可能会产生一些间距。为了避免这种情况的发生，我们可以采用以下两种方式：
（1）在元素之间添加注释，如下所示：
<div class="float_left"></div><!-- --><div class="float_right"></div>
（2）在父级元素上添加font-size为0，如下所示：
.parent{ font-size: 0; } .float_left{ float: left; width: 50%; height: 200px; background-color: #f00; } .float_right{ float: right; width: 50%; height: 200px; background-color: #00f; }
四、实例讲解
下面我们通过一个实例来讲解float布局的具体使用。
HTML代码如下所示：
<div class="parent"> <div class="left"></div> <div class="right"></div> </div>
CSS样式代码如下所示：
.parent{ width: 800px; margin: 0 auto; overflow: hidden; } .left{ float: left; width: 200px; height: 400px; background-color: #f00; } .right{ float: right; width: 500px; height: 400px; background-color: #00f; }
在上述实例中，我们首先定义了一个宽度为800px、居中显示的容器元素parent。然后，我们分别定义了两个子元素left和right，并将它们设置为左浮动和右浮动。
