bootstrap的清除浮动

1. 什么是浮动？

在介绍 bootstrap 的清除浮动之前，我们先来了解一下什么是浮动。浮动指的是让元素脱离文档流，向左或向右移动，直到碰到父元素或者其他浮动元素为止。浮动的元素不会占据文档流中的位置，而是漂浮在其容器的左边或者右边。浮动可以用来实现文字环绕效果或者创建多列布局。

需要注意的是，浮动的元素会影响其他元素的布局和定位，如果不加处理，可能会造成布局的混乱和不可预期的结果。

2. 为什么需要清除浮动？

由于浮动元素的特性，如果不加处理，浮动元素会影响其他元素的布局和定位，甚至会导致一些问题，比如父元素高度塌陷等。因此，在实际开发中，我们常常需要清除浮动元素带来的影响。

3. 清除浮动的方法

常见的清除浮动的方法有多种，这里我们介绍一下 bootstrap 中使用的清除浮动的方法。

3.1 使用 clearfix 类

bootstrap 提供了一个 clearfix 类，可以用来清除浮动元素。该类的定义如下：

.clearfix::after {

    content:"";
    display:table;
    clear:both;
}

需要清除浮动的元素，只需要给其父元素添加 clearfix 类即可：

<div class="parent clearfix">

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

上面的代码中，clearfix 类被添加到了父元素中，可以清除子元素的浮动影响，保证了父元素的布局不会受到浮动元素的影响。

3.2 使用 overflow 属性

在 css 中，还可以使用 overflow 属性来清除浮动。具体的做法是，在父元素中添加 overflow 属性，并将其值设为 auto 或者 hidden：

<div class="parent" style="overflow:auto">

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

这样可以达到和 clearfix 类相同的效果。

4. 总结

浮动是 css 中的一个重要概念，虽然可以用来实现一些常见的布局效果，但如果不加处理，也可能会带来一些问题。因此，在实际开发中，我们需要清除浮动元素带来的影响。

bootstrap 为我们提供了清除浮动的解决方案，包括使用 clearfix 类和使用 overflow 属性。这些方法可以保证父元素的布局不受到浮动元素的影响。