空div块动态赋值后页面混乱的问题

页面混乱很可能是空的div赋值后，占据了 上面的div的空间而造成的，我们可以对上面
的div清除浮动，即不让其他的div影响他的内容的显示，即对他进行css清除浮动的定义
CSS clearfix 清除浮动

在很长一段时间里面，如果一个容器内有浮动元素的话，我习惯在父容器闭合前加一个 clear:both 元素，用于清除浮动，使父容器撑起。如下面得例子：

<style media="all">
.children {float:left;}
.fixed {clear:both;}
</style>
<div class="parent">
    <div class="children">子元素</div>
    <div class="children">子元素</div>
    <div class="children">子元素</div>
    <div class="fixed"></div>
</div>



如果要在不增加 fixed 元素的情况下清除 parent 容器内的浮动，我们可以利用 :after 伪类。 :after 伪类在 W3C 里的定义是：在 :after 元素的内容末尾插入 content 的内容，这些内容默认为 inline 级。

在使用 :after 伪类后，完整的清浮动 CSS 为：


.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

使用上面的样式后，只需为 parent 元素增加一个 clearfix 的class，即可去掉里面的 fixed 子容器。并且兼容目前几乎所有的 web 浏览器。
<不要完全相信上面的内容，他有可能是不正确的>