问题与Twitter Bootstrap清除浮动CSS - 我做错了什么？ [英] Issue with Twitter Bootstrap clear float CSS — what am I doing wrong?

问题描述

作为学习CSS的一部分（&通过创建简单的主题来实践应用它），今天我想知道一些正确的方式清除CSS中的浮动。

我想看看Twitter如何做，所以我下载了Bootstrap，浏览了bootstrap.css文件，并找到了我要找的内容（我发现了两个代码块）：

  .clearfix {
 * zoom：1; 
} 
 .clearfix：before，.clearfix：after {
 display：table; 
 content：; 
} 
 .clearfix：在{
 clear：both; 
} 
  

&

  .container {
 margin-left：auto; 
 margin-right：auto; 
 * zoom：1; 
} 
 .container：before，.container：after {
 display：table; 
 content：; 
} 
 .container：after {
 clear：both; 
} 
  

我马上试了一下，我的代码的特定部分看起来像这样：

 < p class =sample-preview> 
< span class =sample-preview> PREVIEW< / span> 
< em>这是斜体又称为< / em>，< em>这是< / em>。< br /> 
< strong>这是大胆强调的重点< / strong>，所以< strong>这是< / strong>。< br /> 
使用< strong>< em>斜体并加粗显示< / em>< / strong>如果您< strong>< em>必须< / em>< / strong> ;. 
< / p> 
  

+

  p.sample-preview {
 border：1px solid＃FFCCC9; 
背景：＃FFEBE9; 
 outline：2px solid＃FFEBE9; 
 padding：10px; 
} 
 
 span.sample-preview {
 display：inline-block; 
 float：right; 
保证金：0; 
 font-weight：bold; 
 font-size：12px; 
背景：＃FFCCC9; 
 padding：2px 5px; 
 
} 
 
 .sample-preview {
 margin-left：auto; 
 margin-right：auto; 
 * zoom：1; 
} 
 .sample-preview：before，.sample-preview：after {
 display：table; 
 content：; 
} 
 .sample-preview：after {
 clear：both; 
} 
  

虽然我不完全确定，但我认为这段代码导致了一个奇怪的错误在我试过的页面上。我为什么这么认为？当我使用Firebug从代码中移除 display：table; 时，一切看起来都很好。

你可以看看页面此处，错误是 - 第一个粉红色框比内容高。我做错了什么？

解决方案

问题在于您也正在清除右侧的浮动菜单。

有两种解决方案： b
$ b

• 通常是将您的内容区域本身在左边。这意味着它里面的所有内容都在不同的浮动上下文中。

>在你的示例预览段落中。这可能更容易做到。在元素上指定溢出属性（但未设置为 visible ）会使其表现得像浮动容器一样。 / p>

参考： http://www.brunildo.org/test/clear.html ， http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

我还应该注意到这个溢出技巧，你根本不需要clearfix。

As a part of learning CSS (& practically applying it — by creating simple themes), today I wanted to know some proper ways of clearing floats in CSS.

I wanted to see how Twitter does it, so I downloaded Bootstrap, went through the bootstrap.css file, and found what I was looking for (I found two code blocks):

.clearfix {
    *zoom: 1;
}
.clearfix:before, .clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}

&

.container {
    margin-left: auto;
    margin-right: auto;
    *zoom: 1;
}
.container:before, .container:after {
    display: table;
    content: "";
}
.container:after {
    clear: both;
}

I immediately tried it out, and that specific part of my code looked like so:

<p class="sample-preview">
    <span class="sample-preview">PREVIEW</span>
    <em>This is italicized aka emphasized</em>, and so is <em>this</em>.<br />
    <strong>This is bold aka strong emphasis</strong>, and so is <strong>this</strong>.<br />
    Use <strong><em>italics and bold together</em></strong> if you <strong><em>have to</em></strong>.
</p>

+

p.sample-preview {
    border: 1px solid #FFCCC9;
    background: #FFEBE9;
    outline: 2px solid #FFEBE9;
    padding: 10px;
}

span.sample-preview {
    display: inline-block;
    float: right;
    margin:0;
    font-weight: bold;
    font-size: 12px;
    background: #FFCCC9;
    padding: 2px 5px;

}

.sample-preview {
    margin-left: auto;
    margin-right: auto;
    *zoom: 1;
}
.sample-preview:before, .sample-preview:after {
    display: table;
    content: "";
}
.sample-preview:after {
    clear: both;
}

Although I am not entirely sure, I think this code is causing a weird bug on the page I tried it. Why do I think so? Everything seemed fine when I removed display: table; from the code using Firebug.

You can take a look at the page here and the bug is — the first pink box is taller than the content. What am I doing wrong?

解决方案

The issue is that you're also clearing the floated menu to the right.

There's two solutions for that:

• the usual is to float your content area itself to the left. This means that everything inside it is in a different float context. Your clear will only affect the elements inside of it.

• another trick that works is specifying overflow: hidden on your sample-preview paragraph. This is probably easier to do. Specifying the overflow property on an element (but not set to visible) causes it to behave like a float container.

Cfr: http://www.brunildo.org/test/clear.html, http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

I should also note that with this overflow trick, you don't need the clearfix at all.

这篇关于问题与Twitter Bootstrap清除浮动CSS - 我做错了什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！