本文共 848 字，大约阅读时间需要 2 分钟。

负margin

• 设置元素margin-left / margin-top 属性为负值时，元素会按照设置的方向移动相应的距离。
• 设置元素margin-right / margin-bottom属性为负值时，元素本身不动，后面的其他元素会往该元素的方向移动相应的距离，并且覆盖在该元素上面。

圣杯布局

HTML结构：

   
	
    
	
    
     center
    
	
    
   

思路：

1. container设置左右内边距（值等于left，right的宽度）;
2. 三个子元素都设置float:left;
3. left，right占据container左右内边距的宽度；
4. center设置宽度为100%，占据container内容的宽度；

实现步骤：

right 为什么设置margin-right:-200px（自身宽度）后会移动到右上角（上图步骤3）?

如果设置margin-left为负值会怎样呢？

双飞翼布局

HTML结构：

思路：

1. wrapper设置左右内边距用于放置left,right
2. wrapper，left，right，三者设置左浮动

实现步骤：

注意：margin值为百分比时，相对父元素的宽度

实现效果：

总结

1. float：left ； margin-left: - 自身宽度； 会使自身右边框与上一浮动元素右边框重叠（向左移动自身宽度）；

2. float：left ； margin-right: - 自身宽度； 会使自身左边框与上一浮动元素右边框重叠，下一浮动元素会向该元素方向移动相应距离。

3. margin值为百分比时，相对父元素的宽度。

【参考】：

转载地址：https://blog.csdn.net/Conradine_Lian/article/details/108085398 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！