0

嘿，伙计们需要一些关于 html 和 css 浮动内容的帮助。请检查http://jsfiddle.net/anilnamde/DVJ4b/并且以下是我的疑问。还包括下面的代码

    .p{
    background:red;
    width:100%;
    padding:20px;

}

.p div{
    width:49%;
    background:blue;
    float:left;
    margin-left:5px;
    min-height: 200px;
}
</style>
<body>
<div class="p">
    <div>
        first
    </div>    
    <div>second
    </div>
    This is the test text
</div>
<p>This is good</p>
</body>
  1. 根据我的理解，父 div 中的 p 标签和文本应该放在两个浮动元素的后面。这没有发生。
  2. 再次以某种方式没有任何 clearfix 或清除两者或溢出隐藏的父 div 的高度似乎是正确的。这有点难以理解。

有人可以帮我理解这一点。

根据我开始了解其标准示例以了解浮动相关问题并应用 clearfix 修复它。但突然我发现它在没有 clearfix 的情况下开始正常工作。所以我目前不太确定我的浮动理解。

4

5 回答 5

1

  1. .p 中的文本按照应有的方式环绕在浮动的 div 周围，但是您没有在两侧留下任何空间让它这样做，所以它落在下面。p 标签中的文本在 div.p 之外，所以它出现在下面。同样，这是意料之中的。Div.p 是块级元素，因此即使您没有明确说明，它也是全角的。

  2. 您的父 div 展开以包裹已包裹在浮动 div 下方的文本。这是意料之中的。

于 2013-01-30T04:01:10.123 回答
0

最后一个浮动 div 之后的文本用作“clearfix”并“拉”下面的红色框：

http://jsfiddle.net/DVJ4b/1/

至于为什么<p>标签文字出现在红框下方，那是因为外层div没有浮动。

如果您在内容之前有浮动，则浮动不会与它们重叠。浮动仍然是流内容的一部分；它只与定位有关：

http://jsfiddle.net/DVJ4b/4/

我想你可能对绝对定位感到困惑。

于 2013-01-30T04:02:05.493 回答
0

给定的例子不是很好。您有两个浮动元素，它们将占据几乎 100% 的可用宽度，没有空间让“p”标签在其周围“浮动”。所以，发生的事情是文本“这是测试文本”实际上是在浮动的 div 的“周围”和“下方”浮动（只需用 ap 标签包装这个文本并使用它应用背景颜色.p p { background-color: gray; }，你会看到）。这证明你的第一个陈述（

...这没有发生。

) 是错误的，因为它正在发生。

问题是：因为您没有空间让文本浮动到那些浮动框的右侧，所以文本本身正在“像”一个 clearfix 一样工作。

现在，删除文本“This is the test text”，您会发现需要进行清晰的修复，因为红色背景会缩小到顶部，如预期的那样，并且需要清晰的修复。

想尝试不同的东西吗？将“This is the test text”放回原处，将那些浮动框的宽度更改为 51%，然后大吃一惊！

希望我在这里让自己“清楚”。;)

于 2013-01-30T04:09:28.920 回答
0

这是我的解决方案http://jsfiddle.net/burn123/DVJ4b/5/

变更摘要

  • 添加了一篇文章到This is the test test
  • 添加clear:both;到文章中，使其始终显示在浮动对象下方。
  • 将box-sizing属性设置为border-box不会溢出。这将设置元素，以便您为元素提供任何宽度或高度，无论如何它都将遵循该宽度。
  • 添加了一个响应元素，以便在 575px 之前它会浮动，并且任何小于该宽度的元素都设置为 100%。这只是可选的

如果需要，这只是一种改进布局的方法

于 2013-01-30T04:15:01.763 回答
0

这种行为是因为您在.pdiv 中有一些文本必须放在某个地方。考虑到占据 200px 高度的浮动元素，它适合的最佳位置在它们下方，从而拉伸了.pdiv。

如果您从.pdiv 中删除文本（“这是测试文本”），您会看到.pdiv 的高度要小得多。现在高度是由填充引起的，您需要使用 clearfix 或overflow: hidden.

于 2013-01-30T04:00:24.807 回答