问题标签 [clearfix]

那么，如果你添加float: left;到一个元素，它就会被从流程中取出，对吧？据我所知，情况也是如此，position: absolute;那么如何使用 clearfix 清除浮动元素，但对绝对定位的元素却无能为力？从内容流中删除每个内容的方式有什么区别？

我是第一年的网页设计师，我目前正在从事一项需要并排浮动两个内容的任务。每次我将正确的内容浮动到右侧时，我：1）丢失我的整个包装器 2）内容不会浮动在左侧内容旁边
你们知道我做错了什么吗？
这是我的html代码：

和我的 CSS

目前这让我非常沮丧，我不知道该怎么做

简而言之：
基本上，我只想知道为什么 overfow:hidden 会扩展包含浮动项目的容器。它不应该像这张图片一样隐藏溢出的元素http://css-tricks.com/wp-content/csstricks-uploads/css-overflow-hidden.png

为什么它会这样做http://css-tricks.com/wp-content/csstricks-uploads/overflow-float.png

长版本：
非定位、非浮动、块级元素的行为就像浮动元素不存在一样，因为浮动元素相对于其他块元素而言是不流动的。内联元素环绕浮动元素以确认它们的存在。我知道溢出属性是如何工作的以及在哪里应用它，并且最好使用 clearfix 而不是溢出属性来清除浮动（尽管某些情况下可能需要使用溢出清除）。但是，我仍然不明白为什么它会扩展父元素，尤其是当我们使用溢出时：隐藏。为什么父元素不只是“隐藏”溢出的浮动子元素？毕竟，我们不是在隐藏溢出吗？

所以我对最后一段有问题，显然没有清除并滑入 and 的h1中间nav。但是当我在段落之前放置一个带有 clear:both 属性的 div 时，它似乎可以工作。

请忍受我的小提琴。

• 我使用紫色背景来表示我从 nettuts 学到的图像替换技术。
• clearfix 部分是一个名为“group”的类，CSS 在底部。
• 此外，如果我display:block;从h1 > a布局中断中删除，那么后续问题是，我应该浮动哪些元素以及应该在哪里应用 clearfix。

我必须在我的 div 中浮动元素，我使用了在互联网上找到的 clearfix，但它不能正常工作。

CSS

http://jsfiddle.net/qKFAc

应该在.header-nav2个div之下，但它在它们之下，我做错了什么？

谢谢你。

大多数 clearfix 技术都涉及在父容器的最底部添加内容，我最喜欢伪元素方法，因为它不会将不需要的元素添加到 HTML 中。

但是，最近我发现我正在处理一个容器，该容器有一些漂浮但不是全部的孩子。说前两个孩子，第一个向左浮动，第二个向右浮动。我需要一种在第二个元素之后立即清除浮动的方法，这样下面的内容就不会被挤在它们之间。有没有办法清除中间的浮动元素但不添加 clearfix 元素？

下面是一个例子：

HTML

CSS

请看这个jsfiddle看看我现在有什么。

我正在使用 twitter bootstrap 3 来设计一个布局，它有两列，一个浮动侧边栏和一个主内容，其左边距相对于侧边栏的大小，但是当我在主内容内的ul元素中使用 clearfix 类时，似乎是clearfix类，清理侧边栏（浮动清除）并将ul和后续内容向下推。

见http://bootply.com/97603

HTML

CSS

我该如何解决这种行为？

我有两个 div/列。一个向左浮动，另一个向右浮动（对于我正在制作的响应式设计页面，它必须是这种方式）。左 div 的内容远远低于视口/左 div，而右内容更短并且很好地保持在视口/右 div 内。

我需要背景颜色一直扩展到左侧 div 内容的底部（或者右侧 div 的内容，如果它是较长的内容）。

相反，它在视口底部切割背景颜色/ div。我尝试过 clears:both、clearfix 和溢出控件，但均无济于事。我想我没有为此设置正确实施它们。谁能编辑我的小提琴，向我展示我需要做什么才能让它们延伸到底部？

这是小提琴（您需要在小视口中向下滚动以查看它如何切断颜色）：

http://jsfiddle.net/4C89C/

这是我在小提琴中使用的代码：

我使用 clearfix 清除浮动。但问题是，<li>和中的高度不同<div>。li.clearfix高度是 32 像素，但div.clearfix高度是 18 像素。当我删除时.clearfix:before，它们都是一样的。但是，当在引导程序中尝试时，它失败了。（我.clearfix:before在引导程序中删除了，但高度仍然存在差异。）

演示：http: //jsfiddle.net/nevimop/p4HMS/

浏览器（chrome safari ie10，ff 没问题）

添加这个 ul{list-style: none;}高度相同。

我不知道为什么我不能在我的页面中使用清除浮动方法。如果我使用经典<div class="clearfix"></div>没有任何问题，但尝试使用更具语义的解决方案似乎不起作用。这是我的代码：

例如，在这个 URL 中，我不能让它在之后清除：http form.woocommerce-ordering: //melopienso.com/testingtwo/shop/

两个浮动元素具有以下代码：

还有他们的 SCSS：

所以 margin-top ofdiv.yit-wcan-container没有生效。有任何想法吗？

非常感谢！