HTML之清除浮动

愿你成为自己喜欢的样子，不抱怨，不将就，有野心，有光芒！

在网页制作中，我们经常会用到浮动来布局，但是在之用浮动之后，会有一些新的问题出现，此时，我们就需要清除浮动。下面，我们就来讲讲常用的清除浮动的方式都有哪些。

一、在浮动元素的父元素中添加溢出隐藏

*（注：如不加说明，此篇文章中的HTML代码都将以下为准！）

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML之清除浮动</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <div class="b1"></div>
    <div class="b2"></div>
</div>
</body>
</html>

CSS代码

*{
     margin: 0;
     padding: 0;
 }
.b1{
    width: 200px;
    height: 200px;
    background: #e67e22;
    float: left;
}
.b2{
    width: 200px;
    height: 200px;
    background: #44bd32;
    float: right;
}
/* 清除浮动 */

/* 给浮动元素的父元素添加溢出隐藏 */
.box{
    border: 2px solid blue;
    /* 溢出隐藏 */
    overflow: hidden;
}

二、在浮动元素添最后添加一个空盒子（块元素），在给其设置清除浮动

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML之清除浮动</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <div class="b1"></div>
    <div class="b2"></div>
    // 在此处添加一个空盒子
    <div class="clear"></div>
</div>
</body>
</html>

css代码

*{
     margin: 0;
     padding: 0;
 }
.b1{
    width: 200px;
    height: 200px;
    background: #e67e22;
    float: left;
}
.b2{
    width: 200px;
    height: 200px;
    background: #44bd32;
    float: right;
}
.box{
    border: 2px solid blue;
}

/* 清除浮动 */

/*
 * 在浮动元素添最后添加一个空盒子，设置其属性clear
 * clear有三个属性值：
 *      1.left   清除左浮动
 *      2.right    清除右浮动
 *      3.both    清除所有浮动
 */
.clear{
    clear: both;
}

三、在二的基础上，利用伪元素 :before 和 :after

更多情况下，我们使用第三种方式，它跟第二种方式的区别就是：它只添加一个伪元素，没有改变源码。

css代码

*{
     margin: 0;
     padding: 0;
 }
.b1{
    width: 200px;
    height: 200px;
    background: #e67e22;
    float: left;
}
.b2{
    width: 200px;
    height: 200px;
    background: #44bd32;
    float: right;
}
.box{
    border: 2px solid blue;
}
/* 清除浮动 */
.box::after{
    content: '';
    /* 因为添加的伪类是一个行内元素，要将其转换成块元素 */
    display: block;
    clear: both;
}