float属性导致的margin-top失效-遁地龙卷风

css样式如下:

*{margin: 0px;padding: 0px;}

#red,#green{width: 100px;height: 100px;}

#red{float: left;background-color: #f00;}

#green{clear: both;background-color: #0f0;margin-top:20px}

html如下：

<div id="red"></div>

<div id="green"></div>

在chrome49中发现绿色div紧挨着红色div，margin-top属性无效，调整margin-top属性到极大值，依然没有作用，是因为float:left;属性使得红色div脱离了普通文本流的计算。

解决方案如下：

方案一：给红色div增添margin-bottom属性。

方案二 :  让绿色div也float

方案三:给绿色div嵌套一个div，css样式如下:

#bfc{overflow: hidden;clear: both;},其中overflow: hidden;触发了BFC。

...

Tips:

了解BFC的概念会使你对布局机制的认知将得到提示!