Question

我试图解决这个问题，但没有运气......

我的问题：

我有3个div，wrapper，floatleft和normal

其中wrapper正在包装floatleft div，而normal在包装器之外，并且是完全正常的div而没有任何样式

问题是normal div出现在浮动左边的div旁边而不是出现在wrapper下面...为什么？

代码/示例：http://jsfiddle.net/kaAjW/3969/

任何帮助非常感谢

Answer 1

使用.clearfix。

你总是需要清除给定的浮动元素。

定义一个clearfix类并在包装器中调用它。

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

<div class='wrapper clearfix'>

示例：http://jsfiddle.net/kaAjW/3975/

Answer 2

问题是浮动元素，如果包装器只包含它没有高度或宽度的浮动，因为浮动元素不占用空间，如果你在de DOM中你会认为包装器有0宽度和0高度。你必须寻找一个clearfix解决方案，google它，你可以找到许多css clearfix解决方案的例子。有了这个，你将一个clearfix类放到包装器div，使其具有浮动div的大小。

Answer 3

在您的包装上使用float:left并将其width:100%

.wrapper{
  width: 100%;
  float:left;
}

这是最简单的解决方法。我建议调查bootstrap - 它会为您解决所有这些问题

Answer 4

float属性指定元素是否应float。 clear属性用于控制浮动元素的行为。检查此demo

Answer 5

将singleTop用于容器包装器或clearfix hack http://jsfiddle.net/kaAjW/3976/

div出现在包含浮点数的包装器旁边：左...？

5 个答案: