如何使用.clearfix类？ [英] How to use the .clearfix class?

问题描述

我想我误解了 .clearfix 类的概念。也许有人可以帮助我。

我正在寻找一种使用 float 和清除，而不会弄乱我的标记。所以我想，这是 .clearfix 可以用于。

在一个空的H5BP项目，标记如下：

 < div>< / div> 
< div>< / div> 
< div class =clearfix>< / div> 
< div>< / div> 
< div>< / div> 
< div class =clearfix>< / div> 
< div>< / div> 
< div>< / div> 
< div class =clearfix>< / div> 
  

下面的结果。我期待着一个tic tac脚趾领域，但。可以有人告诉我1.）我如何实现我的目标和2.） .clearfix 类真的可以用于？

解决方案

clearfix类用于所有子元素都悬浮的容器。如果你不使用这个，容器将不会得到任何高度（除了IE）。 http://complexspiral.com/publications/containing-floats/

$ b $你以后的不是一个清晰的，但只是一个明确。您可以创建一个类

.clear {clear：both;}

，并应用该类型代替您的清除

如果您想了解更多关于clearfix的信息，有很多信息：

什么是clearfix？

我设置了一个小例子来演示使用清除和清除： http://jsfiddle.net/hjXMG/1

I think I'm misunderstanding the concept of the .clearfix class. Maybe somebody can help me out.

I'm looking for a way to use float and clear without messing up my markup. So I thought, that's where .clearfix can be used for.

Inside of an empty H5BP-project, my markup looks like:

    <div></div>
    <div></div>
    <div class="clearfix"></div>
    <div></div>
    <div></div>
    <div class="clearfix"></div>
    <div></div>
    <div></div>
    <div class="clearfix"></div>

Below the result. I was expecting a tic tac toe-field, though. Can somebody tell me 1.) how I can achieve my goal and 2.) what the .clearfix class really can be used for?

解决方案

The clearfix class is used on a container of which all the children are floating. If you would not use this, the container would not get any height (except in IE). http://complexspiral.com/publications/containing-floats/

What you are after is not a clearfix, but just a clear. You could make a class
.clear { clear: both;}
and apply that one in stead of the clearfix you are using now.

If you want to learn more about clearfix, there is plenty of information out there:
What is clearfix?

I have set up a small example to demonstrate the use of clearfix and clear: http://jsfiddle.net/hjXMG/1

这篇关于如何使用.clearfix类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！