Jquery UI动画对浮动元素没有应用效果

Question

我创造了一个解释问题的小提琴： http://jsfiddle.net/E5XvT/2/

我正在使用Jquery UI的animate函数来淡化元素的背景颜色，并使用以下代码：

HTML：

<div id="element">   
<h1>test</h1>
<div id="child">not animated</div>
<div id="child">not animated</div>    
</div>

CSS：

 #element {
 width:300px;
 margin-left:auto;
 margin-right:auto;
 } 
 #child {
 background-color: blue;
 width: 100px;
 float: left;
 }

Jquery的：

$('#element').animate({backgroundColor: '#FFFF99'}, 'slow');

问题是此函数未将效果应用于浮动的子元素。 如果我删除浮动，它可以工作

由于

Answer 1

添加溢出：隐藏;让父母尊重孩子的身高：

#element{
  overflow: hidden;
}

或

添加一个带有clear的空元素：两者都是最新元素：

<div id="element">   
 <h1>test</h1>
 <div id="child">not animated</div>
 <div id="child">not animated</div>
 <div style="clear:both;"></div>
</div>

Answer 2

您需要为浮动后代创建一个新的block formatting context（从normal flow中取出浮动元素） - 将overflow: hidden;添加到父级#element < / p>

http://jsfiddle.net/E5XvT/7/

Answer 3

你需要清除父元素中的浮点数，你通常有一个clearfix类，这里是Nicolas Gallagher microclearfix ......

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

然后简单地写：

<div id="element" class="cf">