HTML中清除浮动带来的影响,[css]清除浮动对其他元素的影响

前言

之前做项目的时候就发现，一些元素浮动之后，会影响前后其他元素的排版，当时没有及时解决，用其他方式代替了元素浮动，这次再次遇到同样的问题。果然，躲得过初一躲不过十五，以后遇到问题一定要及时解决。

正文

这次要设置的是两个按钮的有浮动，首先看下浮动前后有哪些变化。

可以看到，按钮浮动前是在两条线中间，而浮动后却下移了，不居中了，直接影响美观性。

通过浮动前后两张图对比可以看到，不是按钮下移了，而是下边那条线上移了

然后通过界面调试可以看到，按钮和第2条分割线有部分重叠了(如下图)

学过css的我们都知道，现在按钮已经不属于这个块级元素的标准流了，不去考虑按钮的情况下，标准流就是这样的，字体在中间，两条分割线分别在其上下。

所以，按钮会漂浮在其他的元素之上。

比如说(如下图，知乎上找的图~)

这个时候就要清楚浮动所带来的的影响，使后面的元素变现的跟浮动前一样。

用一种最简单方便的方法，在浮动元素后加入一个空的div style=“clear：both；”以清除浮动

代码：

---

你有2000积分可消费

去消费

---

你有3个可抢的任务

抢任务

这时的界面：

可以看到，按钮又是居中的状态了。

墙裂推荐关于清除浮动参考资料：《那些年我们一起清除过的浮动》