margin负值的问题
经典的三列布局，俗称双飞燕布局，左右两列宽度固定，中间自适应三列都设置为左浮动，直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{ margin: 0; padding: 0;}
.left , .right{ height: 300px; width: 200px; float: left;}
.right{ margin-left: -200px; background-color: red; }
.left{ margin-left: -100%;background-color: #080808; }
.middle{ height: 300px; width: 100%; float: left; background-color: blue;}
</style>
</head>
<body>
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>一般用float布局，当一列排满的时候，假如其他还有float元素，那么它在碰到其他float元素，会靠在右边，当一行排满，它就会在第二行重新排列，这里middle width=100%，那么left和right 是不是应该排在下一行，但是当你给left设置margin-left:-100%,right设置margin-left:-200px 大于其自身的宽度时，都跑到第一行去了 （一定要设置大于-200px,否则跑到第二行）
这里的疑问就是，当一个float元素他的margin负值大于他的宽度时会发生什么？有哪些奇怪的特性？
写回答
-
IT从业一个元素的宽度为margin+padding+border+内容宽度
2.一个float:left的元素的左外边界必须再其前面出现的float:left元素的右外边界的后面，并且元素的的左边界不能超过其包裹元素的左内边界，右外边界也不能超过包括元素的右内边界
3.一个float:left元素的左外边界必须在其之前的任何一个float:left元素的右外边界的右边如题中的css的定义及float元素在DOM中的位置
按HTML代码的顺序，首先放middle元素，然后是left，最后是right
1..middle元素首先放置，占据整个父元素的宽度(container_width)
2..left元素接下来放置，其宽度为200px，margin-left:-100%
3..left元素的左外边界必须在middle元素右外边界的右边。margin-left:-100%形成的效果是元素的左外边界在.left元素的左内边界向左100%container_width处，同时需要满足前面提到的规则,那么形成的效果是.left元素整体向左边移动了100%container_width,其左内边界和middle的左外边界对齐。.left元素的右外边界位于middle元素的左外边界的的200处。
3..right元素接下来放置，宽度为200px,margin-left：-200px,.right的左外边界在其左内边界向右200px;
4..right元素的左外边界必须在之前出现的float:left右外边界的右边,对之前.left元素和.middle元素的分析，这个位置点就是.middle元素的右外边界;形成的效果就是.right元素左内边界向左移动了200px如果.right元素的设置margin-left:-100px时，元素宽度为-100+200=100px。如果放在.middle同一行那么其右边界将超过包裹元素的的右内边界，故.right将换行显示，并且左外边距将向右边移动100px，看到的效果是.right元素只有100宽度的内容可见
2019-07-17 19:45:47赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
