Css div出现在包含float:left。。。？

我一直想弄明白，但是运气不好

我的问题：

我有三个div，

wrapper

，

floatleft

和

normal

其中，

wrapper

正在包装

floatleft

div，而

normal

在包装器之外，是完全正常的div，没有任何样式

问题是

normal

div出现在float left div旁边，而不是出现在

包装器下。。。为什么?

代码/示例：

非常感谢任何帮助
使用
.clearfix

您始终需要清除元素的给定浮点值

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

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

<div class='wrapper clearfix'>

.clearfix:after{
可见性：隐藏；
显示：块；
字号：0；
内容：“；
明确：两者皆有；
身高：0；
}

示例：
对于容器包装器或clearfix hack使用
溢出：隐藏
问题在于float元素，如果包装器仅包含float，则它没有高度或宽度，因为浮动元素不占用空间。如果输入dedom，则包装器将具有0width和0height。你必须寻找一个clearfix解决方案，谷歌它，你可以找到许多css clearfix解决方案的例子。这样，您将向包装器div添加一个clearfix类，使其具有浮动div的大小。
在包装器上使用
float:left
，并为其指定
宽度：100%

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

这是最简单的修复方法。我建议您研究一下-它为您解决了所有这些问题
float属性指定元素是否应该
float
。
clear属性用于控制浮动元素的行为。请检查此项