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的概念会使你对布局机制的认知将得到提示!
网友评论