Question

嘿伙计们需要一些关于html和css float东西的帮助。请检查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>

根据我的理解，父div中的p标签和文本应该在两个浮动元素后面。这没有发生。
再次以某种方式没有任何clearfix或清除两者或溢出隐藏的父div的高度看起来是正确的。这有点难以理解。

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

正如我开始理解其标准示例以了解浮动相关问题并应用clearfix来修复它。但突然间，我发现它开始正常工作没有clearfix。所以我现在对我的浮动理解还不太确定。

Answer 1

.p内部的文字正好包裹浮动的div，但是你没有留下它在两侧的空间，所以它落在了下面。 p标记中的文本在div.p之外，因此它显示在下面。再次，这是预期的。 Div.p是一个块级元素，因此即使没有明确说明，它也是全宽的。
您的父div展开以包装已浮动的div下面的文本。这是预料之中的。

Answer 2

这种行为是因为你在.p div中有一些文本必须去某处。考虑到占据200px高度的浮动元素，它适合它的最佳位置低于它们，从而拉伸.p div。

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

Answer 3

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

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

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

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

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

我认为你可能会对绝对定位感到困惑。

Answer 4

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

......哪个没有发生。

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

问题是：因为你没有空间让文本浮动到那些浮动框的右边，文本本身就像'一个clearfix'一样工作。

现在，删除文本“这是测试文本”，您将看到需要一个明确的修复，因为红色背景将缩小到顶部，按预期运行并为clearfix哭泣。

想尝试不同的东西吗？将“这是测试文本”放回原位，将那些浮动框的宽度更改为51％，并感到惊讶！

希望我在这里“明白”。 ;）

Answer 5

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

更改摘要

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

这只是一种在需要时改善布局的方法

如果没有clearfix，CSS如何浮动div表现

5 个答案: