CSS浮动属性问题（+指导）

Question

我需要一些帮助来弄清为什么我的布局很乱。这是我正在处理的：该网站。绿色框应该在紫色框内。我认为存在浮动问题。因为我并不完全理解float规则，所以请有经验的人帮我识别问题并建议一些好的“古老”文档阅读材料。

谢谢！

- Tbi45

---

请参考以下链接以了解有关清除浮动的背景知识和解决方案：https://dev59.com/4Goy5IYBdhLWcg3wcNhO 和 https://dev59.com/CnVC5IYBdhLWcg3wsTZi - andyb

#content 上的 overflow: hidden - Adam Tomat

我的建议是使用 display:inline-block 元素，完全避免浮动元素。 - andyb

@Adam 这个代码可以工作，但你能告诉我使用它会有什么后果吗？或者没有任何后果，因为如果我使用 height:auto，内容永远不会溢出。 - Tbi45

从我记事起，我一直使用那种方法，并且根据我的经验，在大多数浏览器中它是一致的。我记不得在<=IE7中是什么样子了，但在IE8+中很好用。我能想到的唯一问题是，如果您需要包装器具有固定的高度。它显然会截断任何溢出的内容（请注意，我认为您也可以使用overflow:scroll）。此外，在某些情况下，您可能会有一个固定容器，高度为200像素，其中左右各有两个浮动的div。如果您在其中一个子元素中放置了一个在单击时扩展的项目（例如Facebook“Like”按钮），它也将被截断。 - Adam Tomat

以下是有关编程的内容：浮动元素的包含问题和“overflow: hidden”的神奇之处。 - Adam Tomat

Answer 1

在具有id为content-n的div中添加 overflow: hidden;。

#content-n {
    clear: left;
    position: relative;
    width: 980px;
    overflow: hidden; /* add this */
}

- Seer

---

你能告诉我为什么会发生这种情况吗？可能会有什么后果？它可以工作，但是...为什么呢？ - Tbi45

#content div 包含 #content-n div，但后者没有指定高度属性。如果您为其添加 overflow:hidden; 属性，则它将具有其中元素的高度，即 #nav_cat 元素的高度。因此，当 #content-n 也具有高度时，#content div 将会“包含”该元素。 - Seer

是的！我刚刚自己解决了。无论如何，还是谢谢你。 - Tbi45

很好。如果这正是您要寻找的答案，那么您也可以接受它 :) - Seer

@Seer 请查看 http://meta.stackexchange.com/questions/88535/asking-for-someone-to-accept-your-answer - andyb

感谢@andyb提供有用的信息。 - Seer

Answer 2

浮动（Float）会将项目从文档流中移除。

添加一个空的 <div> 或 <span> 元素，并给它加上 CSS 样式 clear: both;。 这样可以使该 div 元素清除浮动元素，其父元素随之完全展开高度。

了解clearfix和floats - 特别是“清除浮动的技术”部分标题。

来源：

CSS Clearfix
All About Floats

- Bill

---

所以这就解释了为什么如果我删除float属性，一切（视觉上）都会重新回到盒子里。 - Tbi45

Answer 3

你的#container中的项目都向左浮动。

这意味着它们会一直向左堆叠，直到达到包含元素的宽度，此时它们将开始换行（就像在你的情况下发生的那样）。

容纳浮动项目的包含元素不会扩展以包含浮动元素。你可以强制执行的一种方法是执行以下操作：

#container:after{
 content: ".";
 clear: left;
 visibility: hidden;
}

这基本上在 div 的末尾添加了一个句号，将其设置为清除左侧（以清除所有浮动项），然后设置为不可见，强制容器扩展到其内容之外。

- Jamie Dixon

---

content:"." 是什么意思？ - Tbi45

它在包含的 div 底部添加了一个点（句号）。请参见我的答案的最后一部分。 - Jamie Dixon

Answer 4

嗯，

这是我想推荐你阅读有关浮点数的内容。

http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

除此之外，如果您将#content的定位从相对改为绝对。那么绿色框将被包裹在紫色框内，因为它将相对于父元素(#content)定位。

#content {
   position: absolute;
   ..
   ..
   ..
}

浮点数是一项非常好的功能，但需要小心使用。

- Rahul Patil