负边距跟relative
负边距是整个文档流发生变化，后面的元素跟着改变，即设置margin-top:-10px,则如果有相邻元素，元素会上移，覆盖之前的元素
负边距：
如果对两个元素同时设置浮动，第二个元素设置负边距，如果负边距设置的值 等于其自身的宽度，则该元素会上去，在第一个元素的末尾出现（同时第一个元素感知不到第二个元素上来）
如果负边距设置的值 等于-100%，则该元素会上去，且与第一个元素左上对齐，即 -100%为移动的距离为父容器宽度，回到起点
这样的话第二个元素直接把父元素挡住了。
用圣杯布局做分栏
Paste_Image.png
圣杯布局：
左中右三栏，设置四个层，第一个大层设置padding：0 100px;并清除浮动
第二，三，四个层设置浮动，第三，四个设置浮动和负边距，position:relative;left:-100px(与padding，自身宽度一样)
左右侧边栏宽度一般固定，中间的自适应
![Upload Paste_Image.png failed. Please try again.]
双飞翼布局：
设置五个层，第一个大块，设置border即可，并清除浮动，左右中三个布局，先设置中间的，并在内部嵌套一个wrap的层，左，右两个分别设置浮动和负边距，使得其上移至第一个main在同一高度，再设置wrap使其margin-left和margin-right即可
Paste_Image.png
网友评论