margin在文档流和浮动中的区别_标准文档流下的块元素设置margin,与为浮动的元素设置margin有什么不同-优快云博客

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

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

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

CSS：

[css]view plaincopy 
   
 .container{  
     width:300px;   
     height:300px;   
     background:black;  
 }  
       
 .inner{  
     width:100px;   
     height:100px;   
     background:red;  
 }  

HTML：

[html]view plaincopy 
   
 <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设置的方向和浮动方向相反，浮动元素不移动。