元素前后清除浮游物 [英] Clear Floats Before And After Element

问题描述

我有一系列 float：left; 的元素。理想情况下，我想用一个类清除单个元素两侧的浮动元素，而不会在非浮动元素之后向 clear：left; 添加另一个元素。 p>

示例其中 .one-line 应该在自己的行上。

我觉得这应该可以在没有多个类的情况下完成。任何想法？

解决方案

这对我来说很肮脏，但它确实做到了你想做的事（甚至可以在IE8 ）。给同一个类添加一个边界将阻止任何东西从浮动到其右边，并强制它们到达下一行。：

 。单行{
明确：两者; 
保证金：100％; 
} 
  

jsFiddle示例

I've got a series of elements that are float: left; on each other. Ideally I'd like to clear the float on either side of a single element with one class, without adding another to clear: left; after the non-floated element.

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

How I'm doing it now with two classes.

I feel like this should be able to be done without multiple classes. Any ideas?

解决方案

This feels dirty to me, but it does do what you want (and even works as far back as IE8). Adding a margin to the same class will stop anything from floating to its right and force them down to the next line.:

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

jsFiddle example

这篇关于元素前后清除浮游物的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！