清除浮动元素之前和之后

Question

我有一系列彼此float: left;的元素。理想情况下，我想清除单个元素两侧的浮点数，而不是在非浮动元素之后向clear: left;添加另一个类。

Example where .one-line should be on own line.

How I'm doing it now with two classes.

我觉得这应该可以在没有多个课程的情况下完成。有什么想法吗？

Answer 1

这对我来说很脏，但它确实做你想要的（甚至可以像IE8一样工作）。在同一个类中添加一个边距会阻止任何东西浮动到右边，并强制它们下移到下一行。：

.one-line {
  clear: both;
  margin-right:100%;
}

<强> jsFiddle example

Answer 2

给它margin-right 100％

.button {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
  border-radius: 60px;
  float: left;
}

.one-line {
  clear: both;
  margin-right:100%;
}