Question

我遇到了CSS浮动

的问题

在这里你可以看到它的样子：

基本上，我有两个div，我需要最后一个向左浮动。最后div个漂浮物离开是很重要的。

HTML code：

<div id='wrapper'>

    <div id='block1'>block1</div>
    <div id='block2'>block2</div>

</div>

CSS代码：

#wrapper {
    overflow: hidden;
    background: red;
}

#block1 {
    background: yellow;
}

#block2 {
    background: green;
    float: left;
}

我不明白为什么它不会向左浮动，我一直试图解决这个问题。

最好的问候，亚历山大

Answer 1

你关闭了包装div吗？你也没有左边的第1块浮动。从你的链接看来，Block 2向左浮动。你对你想要完成的事情有一个更具描述性的想法吗？

Answer 2

block2正在清除block1并向左浮动。如果您希望block2显示在block1的左侧，则需要在{h}中block2之前block1或浮动block1 } 在右边。请务必仔细阅读the CSS spec。

Answer 3

div 向左浮动。

如果你想让div彼此相邻，你必须为它们指定一个宽度并将它们设置为向左浮动，就像Jason建议的那样。

Answer 4

实际上你并不需要块（1和2）的宽度，但是如果需要整个浏览器，你可以使用它。你要做的就是将block1浮动到左侧。

#block1 {
float:left;
    background: yellow;
}
#block2 {
    float: left;
    background: green;
}

我刚刚在我的机器上测试了它（FFox，IE7,8和9），一旦你将block1浮动到左侧，它就能正常工作。

您使用的是哪个浏览器？你使用的是Standard还是Quirksmodus？

Answer 5

将“float：left”设置为1st div也应解决问题

Answer 6

这种方式有效：

<html>
<head>
</head>
<body>
<style>
#wrapper {
    overflow: hidden;
    background: red;
}

#block1 {
    background: yellow;
}
#block2 {
    background: green;
    float: left;
}
</style>
<div id='wrapper'>
    <div id='block2'>block2</div>
    <div id='block1'>block1</div>
</div>
</body>
<html>

Answer 7

Floats通常需要明确的width设置。

如果您希望两个div彼此相邻，那么您需要为每个width和float提供overflow: hidden;。

此外，float会清除div，因此如果您希望float之外的wrapper到{{1}}，则不会发生。

无法弄清楚为什么块不会浮动

7 个答案: