清除浮动方式与原理

清除浮动

浮动规律

• 如果浮动元素的上一个元素也是浮动，那么该元素会与上一个元素排列在同一行，如果行宽不够，后面的元素会被挤到下一行
• 如果浮动元素的上一个元素不是浮动，那么该元素仍然处于上一个元素的下方，根据浮动设定在左或者在右，而其本身也脱离文档流。后边的元素会自动往上移动到上一个文档流块元素下方为止。

高度坍塌

当没有指定高度的父元素中的子元素全部都浮动时，父元素中内部高度因为是普通流中的块元素撑起来的，所以这个时候父元素的高度会变成0，或者会有部分浮动元素的位置会超出父元素的高度之外。这种现象，叫做"高度坍塌"。

代码：

// html
<ul class="float-list">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
</ul>

// CSS
<style>
    .float-list {
        padding: 10px;
        border: 1px solid #41c134;
        list-style: none;
    }
    .float-list .item {
        width: 100px;
        height: 100px;
        background-color: #3456c1;
        /* float: left; */
        border: 1px solid #e93124;
    }
</style>

以上 CSS 代码中，每个列表项元素都设置了float:left，且列表元素没有设置具体高度值，所以就出现了"高度坍塌"，效果图如下:

清除浮动

​ 简单来说，清除浮动的直接目的就是解决前面所说到的高度坍塌问题。清除浮动的方式主要有以下这些。

使用带clear属性的空元素

​ 在浮动元素后使用一个空元素如<div class="clear"></div，并在 CSS 中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear"/>或<hr class="clear"/>来进行清理。

• 优点: 简单，代码少，浏览器兼容性好。 缺点: 需要添加大量无语义的 HTML 元素，代码不够优雅，后期不容易维护。

使用这种方法，HTML 部分代码变为这样:

<ul class="float-list">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
</ul>

CSS代码：

.clear{    
	clear: both;
}

使用CSS的overflow属性

​ 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，

​ 这种方法比第一种方法稍微好用点，不需要改动到 HTML 结构，只需要给容器元素添加 CSS 属性，代码如下:

// CSS
.float-list {
    padding: 10px;
    border: 1px solid #41c134;
    list-style: none;
    overflow: hidden;
}
// HTML不变

原理：

BFC 会计格式化上下文 如果触发了元素的BFC，他就会按照BFC的规则来渲染页面。而BFC的规则中有一条是浮动的元素也参与计算高度。

触发BFC的规则有很多，比如像上文的overflow: hidden 等等

给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

使用CSS的:after伪元素

​ 给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

// CSS
.clearfix::after{
    content: ""; // 没有内容写空，但一定要写
    display: block; // 伪元素默认为行元素，
    clear: both; // 清除浮动
}

// HTML
<ul class="float-list clearfix">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    // 相当于在此处添加了一个看不见的块元素
</ul>