margin在文档流和浮动中的区别

    CSS盒模型中的margin我们是否真的了解？我们是否知道margin在文档流和浮动中的区别？

    要想了解margin的原理，需要先了解一下什么是参考线。关于参考线请参考http://www.planabc.net/2007/03/18/css_attribute_margin/。

    知道了参考线之后，我们可以很好的理解如下代码：

    CSS：

.container{
	width:300px; 
	height:300px; 
	background:black;
}
	
.inner{
	width:100px; 
	height:100px; 
	background:red;
}

    HTML：

<div class="container">
    <div class="inner"></div>
</div>

    

    如果给.inner设置margin-left的话红色div肯定会左右移动（根据margin-left正负来决定是左还是右），而设置margin-right的话红色div不会移动。

    但以上都是margin在文档流中的表现，如果红色div是浮动的呢？比如设置红色div向右浮动。

    这个时候如果给红色div设置margin会怎么样？

    如果设置margin-right的话，红色div会左右移动（根据margin-right是正负来决定是左还是右），而设置margin-left的话，红色div不会移动。

    同样我们可以测试如果红色div是向左浮动的情况。

    测试后，我们可以得出结论：

    在浮动状态下，如果margin设置的方向和浮动方向相同，那么浮动元素发移动；如果margin设置的方向和浮动方向相反，浮动元素不移动。