问题标签 [clearfix]

在我的网站http://jonasolaussen.se/?page_id=16<div style="cleare:none;"> </div>上，您会看到文字位于页脚下方，如果我像在其他网站上那样做广告，我确实会变得更好。

有人有解决办法吗，不胜感激！

我有一个 jquery 脚本，它依赖于 'ul' 的高度来调整其包含的 'div' 的大小。

在我的 'li' 元素上没有 'clear:left' 时，它们的父级 'ul' 的高度为一个 'li'。

在我的 'float:left' 'li' 元素上使用 'clear:left'，结构丢失了。

这是没有'clear：left'的DOM。'li' 元素处于完美位置，但 div 没有调整大小以适应它们。

jsfiddle.net/63pNN/35/

这是带有'clear：left'的DOM。div 正在调整大小以适应列表高度，“li”元素重叠

jsfiddle.net/63pNN/36/

任何想法都是有帮助的！我好近啊……！

谢谢

有没有更简化的使用方式.clearfix？

老的：

我的新明确修复：

我把它通过一个验证器，我没有错误。有其他人知道或看到不能使用它的任何原因吗？它只保存了 3 行代码和一个.，但仍然如此。

如果我删除了页脚上方的 clearfix div，文本就会就位，就像在 Firefox 上一样。

但这会破坏其他事情。我不明白 clearfix 是如何影响页脚的...

我的页面：

http://www.craftonhills.edu/Current_Students/Counseling/Assessment.aspx

首先，为了非常清楚，这里有一个 JS fiddle 展示了我想要实现的目标：

http://jsfiddle.net/bb_matt/VsH7X/

这是解释-我的理由：

我正在使用 1140 网格框架创建一个响应式站点。这是一个相当复杂的布局。

我创建了一个可重复使用的简单画廊类，它可以放入任何定义的列大小并使用媒体查询，我将相关的百分比宽度应用于 li 元素。每个 li 元素的右边距为 5%。我在媒体查询中使用 nth-child(xn+x) 来删除每行末尾的右边距。

一切正常 - 图像随着布局调整大小而调整，连续画廊项目的数量正如我根据百分比定义的那样工作。

唯一需要解决的问题是在行之间清除。我无法添加额外的 html 标记，并且我想避开过于复杂的 jquery 修复。

我知道解决这个问题的两种方法，但我并不热衷于其中任何一种。

第一个修复，简单地在 li 元素上使用 display: inline-block ，顶部垂直对齐，一切都会正确流动......但是，所有百分比都会被拍摄，并且画廊项目不再整齐地适合分配的空间。

第二个修复，给列表项一个高度。如果有必要，我会沿着这条路线走——它需要不同的高度，具体取决于分辨率——没什么大不了的，但不是那么整齐。

所以我想要做的是使用 jquery 应用 clear-fix 或 micro clear-fix。原因是我无法访问 CSS，所以我一直在使用 jquery 来制作我所有的类和其他与 css 相关的需求。这真的是我无法做到的一件事，所以我需要一些帮助。

两种方法：clearfix

和微clearfix

使用伪技术，我不知道如何用 jquery 应用它。我一直在做

传统上为我的 css，但因为我无法访问样式表，所以我只需要使用 Jquery 来定义这些样式表。如果您能想到一个聪明的方法来做到这一点，当然不必那样，我知道奇怪的要求，但这是一个工作限制，提前感谢您的帮助。

我有五个要浮动的部分标签，以便它们彼此内联。我过去曾使用过 float / clearfix 技术，它已经奏效了。我无法弄清楚我做错了什么。

我正在尝试浮动一些元素并应用 clearfix 以便父元素可以扩展到子元素的高度和宽度。

所以，我只是按照这个小提琴设置布局：http: //jsfiddle.net/fMjEx/

然后我想浮动里面的元素.bar。这通常很简单：

1. 浮动元素。
2. pie-clearfix使用或清除修复父级overflow: auto。

但是，我遇到了这些问题：

• 如果我使用 pie-clearfix，.picture旁边的元素.bar也包含在清除中：http: //jsfiddle.net/6C7WD/

• 如果我使用overflow: autoor overflow: hidden，则.bar不再跨越文档的宽度：http: //jsfiddle.net/fv2gA/

最初，我的一个解决方案是制作.picture position: absolute. 然而，这种方法的问题是元素被从流中取出。

在布局中，高度.bar是可变的，取决于里面的内容。我想给出一个.bar，以便它们之后的任何东西都被向下推那个量，这取决于是否或具有更大的高度。.picturemargin-bottom.bar.picture

这排除了使用position: absoluteon.picture作为解决方案。

是否有满足以下条件的解决方案？

• Clear 仅在.bar.
• 不从流中删除任何元素。

如果您在 IE9（或任何其他现代浏览器）中查看以下网站，您将看到我想要的效果。但是，在 IE8 中查看或更低的标题 DIV 包含男人的照片折叠到看起来是 0 的高度。我已经尝试过最小高度和 clearfix，但是 nada。

http://www.adrianwaddingham.com/

我的问题如下：
边框不包裹包含的项目。我知道这是因为我将内容项定位为绝对，但我需要它们是绝对的，布局才能正常工作。这也意味着我不能使用 clearfix 解决方案（这意味着我必须浮动元素，这不是一个选项）。
所以我的问题是，如何让父 div 获取包含元素的高度。

编辑：没有 Javascript 解决方案，只有 CSS

html:

CSS：

​</p>