javascript - 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;
 }

查询：

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

问题是这个函数没有将效果应用于浮动的子元素。如果我删除浮动，它的工作原理

谢谢

score 2 · Accepted Answer

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

#element{
  overflow: hidden;
}

或者

添加一个带有 clear:both 作为最新元素的空元素：

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

score 2 · Accepted Answer

您需要为浮动后代创建一个新的块格式化上下文（因为浮动元素从正常流程中取出） - 添加overflow: hidden;到父级，#element

score 2 · Accepted Answer

你需要清除父元素中的浮动，你通常有一个 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">

3 回答 3