对float元素使用clear:both

引言：

在项目练手的过程中，有一个类似于APP的点击按钮展开详情页面的需求，我一开始是将详情按钮放在所有文本的正下方，但是这样并不美观。后来得到群内大佬的帮助，知道了其实这样的操作可以通过纯css来实现，我大受震撼，因此写下这篇博文记录学习心得。

一、float元素的理解

首先想想： 一个元素如何实现浮动？

通过float可以实现水平方向，即左右浮动。设置了浮动后，元素会尽可能的向最左方或者最右方移动，直到它的外边缘碰到了父元素的外边框，或者是另一个浮动元素的外边框为止。

需要注意的是，CSS的浮动会让其周围元素布局跟着发生变化。

浮动元素后面的元素将围绕该元素！！

浮动元素前面的元素将不会受到影响！！

// html 部分
<div class="test">
    <div class="more">更多</div>
    <p>这篇文章对你有帮助吗？有帮助的话可以点赞留言表示支持喔！您的关注是我成长的最大动力（我忘了，好像有的博文后就是这些话）</p>
</div>

// css 部分
<style>
.more{
    height: 12px;
    width: 30px;
    font-weight: bold;
    background-color: #bfa;
    float: right;
    font-size: 10px;
}

.test{
    width: 150px;
    height: 150px;
    border: 1px solid #333;
    font-size: 10px;
}
</style>

可以看出当浮动元素在文本元素前面的时候，文本元素会受到影响，产生环绕现象。

那么如果在本案例中将浮动元素放在文本元素的下面，就不会对文本元素产生影响。

    <div class="test">
        <p>这篇文章对你有帮助吗？有帮助的话可以点赞留言表示支持喔！您的关注是我成长的最大动力（我忘了，好像有的博文后就是这些话）</p>
        <div class="more">更多</div>
    </div>

二、clear:both的使用

在对浮动元素产生一定了解后，不难发现有时候由于脱离了文档流，浮动自带的环绕效果属实不太方便，在浮动元素后面的元素就会收到该浮动的影响。因此就需要使用clear:both来清除这种影响。

其实在官网中clear属性值有left、right、both、none、inherit，使用both表示：在左右两侧均不允许浮动元素。将专业术语转义为人话就是：clear可以清除在html中位于它前面元素对自身的影响。

举个栗子：

// html部分
<div class="float-check">
        <div class="left"></div>
        <div class="right"></div>
</div>

// css部分
<style>
.float-check{
    height: 100px;
    width: 200px;
    border: 2px solid #333;
}

.left{
    width: 50px;
    height: 50px;
    background-color: #333; /*黑色*/
    float:right;
}

.right{
     width: 50px;
     height: 50px;
     background-color: #bfa; /*浅绿色*/
     float:right;
}
</style>

看到这里停顿分析一下，.left盒子先使用了float:right，所以它先移动到容器的最右边，然后.right盒子再移动到最右边（写到后来才发现这样命名不符合实际）。

好了，浮动实现了。结合第一节再看看代码段，.right盒子在.left盒子的下面，也就是说.right盒子的浮动并不会影响到.left盒子，而.left盒子可以影响.right盒子。

那么如果给.right盒子添加clear:both属性，是不是就可以清除.left浮动的影响了呢？

答案是：可以！

---分析---

在刚开始对left设置浮动的时候，它脱离了文档流，也就是说在页面中它并不会占用布局，因此right盒子的向右浮动仍是在当前行。由因为元素的浮动在遇到容器的边框或者是相邻浮动元素的边框时就会停止，因此产生了左边是.right盒子，右边是.left盒子的现象。（命名问题。。求谅解。。）接下来对.right盒子设置clear:both，那么.left盒子脱离文档流对.right所产生的影响就会被清除，.right也正常的在下面一行浮动到了最右边。

三、案例

我认为做一个案例这个对于刚刚介绍的两节有很大的帮助作用。

稍后我会贴出大佬分享的一个案例链接。

如果对于在该文章中看到对button使用clear:both后，这个按钮就可以浮动到.test的before伪元素的下方有不理解的地方，可以再回来看看我的个人理解。

在第一节介绍过，浮动元素会移动到外容器的边框或者是相邻元素的边框就停止，这里也一样。如果对button使用clear:both，可以清除before伪元素对他的影响，他也就顺利的移动到before的下面，实现float:right了。

 

 

找到了大佬以前贴出的链接：

https://juejin.cn/post/6963904955262435336

我认为这个案例对自身的帮助非常大，因此分享一下。