浮动和偏移--布局
margin-left:当元素不存在width属性或者（width：auto）的时候，负margin会增加元素的宽度;当元素的width属性一定的时候，负margin会使元素左移。
margin-top:为负值不会增加高度，只会产生向上位移
margin-bottom:为负值不会产生位移，会减少自身的供css读取的高度
image.png
想要创建上图中黑框内的几个元素按顺序排下来，中间带些间隔的布局要怎么做？
一般情况下，我们会把黑框里面的子元素向左浮动，然后设一个合适的margin-right,是不是就办到了呢？不能，因为外边黑框的宽度是固定的，就是里面四个子元素的宽度加上三列间隔的宽度，所以靠近右边边界的子元素就不应该有正向的margin-right了，否则这一行就只能容纳三个子元素了。如下图：
image.png
有人说那这还不简单，给靠近右边界的那些子元素加一个class，把它的margin-right设为0不就行了。这当然可以，但如果这些子元素是在模板中通过循环动态输出的，那在循环的时候还得判断哪些子元素是靠近右边边界的，如果是就加上一个class。这样做的话是不是就有点麻烦了？
所以解决办法是加大子元素的父容器的宽度，让它能够容纳一行中有四个子元素加上四列间隔的宽度，然后最外面的的黑框的那个容器设一个overflow:hidden就行了，为什么呢？因为overflow截取的宽度是不包括负偏移的，因为父容器的高度在css看来是不包括偏移量的，也就是说此时文档流向右偏移了margin-right的值，那么文档流的实际内容宽度就缩短了margin-right这么多。
再仔细说一遍，其实就是负的边距好像能减小元素在文档流中的尺寸一样，但事实上，它的尺寸大小并没变，只是文档流在计算元素位置的时候，会认为负边距把元素的尺寸减小了，因为位置也就发生变化了。这只是打个很形象的比喻，帮助大家理解一下。还要注意的是，文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。
比如，一个没有设定高度的块状元素，其高度是自动的，具体来说就是由它里面的文档流最后的位置决定的。假设它里面有一个出于文档流中的子元素，高度为100px;那这时这个父元素的高度就等于子元素的高度100px了，如果子元素继续增高，那么父元素也会跟着增高。可是如果这时子元素设一个负的margin-bottom,比如-20px，因为负边距会影响到文档流，本来文档流的高度是从父元素的最顶端到子元素的最底端这段高度，现在子元素有一个margin-bottom:-20px;就相当于文档流要向上退后20px,这样整个文档流的高度就减少了20px了，那么父元素的高度也会跟着减少20px。在IE8+以及那些标准浏览器中，这还需要父元素拥有一个overflow:hidden的属性，因为父元素的高度变了，但子元素的高度并没有变，所以需要使子元素超出隐藏，但即使不设置overflow:hidden，父元素的高度也是变小了的，只不过这时子元素的高度会超出父元素。在IE6中则不需要，但需要触发它的hasLayout属性。
上面说了负的左右边距能加大元素的宽度，所以给子元素的父容器设一个合适的负的margin-right就可以了。
当然你也可以直接在css中把子元素的父容器的宽度设宽一些，举这个例子只是为了说明负边距也是一种方法。看下完整的代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body,ul,li{ padding:0; margin:0;}
ul,li{ list-style:none;}
.container{ height:210px; width:460px; border:5px solid #000;}
ul{ height:210px; overflow:hidden; margin-right:-20px;}/*一个负的margin-right,相当于把ul的宽度增加了20px*/
li{ height:100px; width:100px; background:#09F; float:left; margin-right:20px; margin-bottom:10px;}
</style>
</head>
<body>
<div class="container">
<ul>
<li>子元素1</li>
<li>子元素2</li>
<li>子元素3</li>
<li>子元素4</li>
<li>子元素5</li>
<li>子元素6</li>
<li>子元素7</li>
<li>子元素8</li>
</ul>
</body>
</html>
双飞翼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#container {
width:100%;/*100%才行，不能写死固定数据*/
margin: 0 auto;
overflow:hidden;
float:left;
}
#main-content {
background:gray;
margin-left:200px; /*与left产生10像素间隔*/
margin-right:200px; /*与right产生10像素间隔*/
}
#left {
float:left; /*在container右侧浮动，即紧跟container右侧*/
width:190px;
background:red;
margin-left:-100%; /*在container右侧浮动，即紧跟container右侧，然后再左侧偏移父元素的宽度*/
}
#right {
float:left;
width:190px;
background:green;
margin-left:-190px; /*在container右侧浮动，即紧跟container右侧，然后再左侧偏移自身元素的宽度*/
}
</style>
</head>
<body>
<div id ="container">
<div id="main-content">main content</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</body>
</html>
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
如果代码如下：
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#container {
/* width:100%;100%才行，不能写死固定数据*/
margin: 0 auto;
overflow:hidden;
float:left;
}
#main-content {
background:gray;
/* margin-left:200px; 与left产生10像素间隔*/
/* margin-right:200px; 与right产生10像素间隔*/
}
#left {
float:left; /*在container右侧浮动，即紧跟container右侧*/
width:190px;
background:red;
/* margin-left:-100%; 在container右侧浮动，即紧跟container右侧，然后再左侧偏移父元素的宽度*/
}
#right {
float:left;
width:190px;
background:green;
/* margin-left:-190px; 在container右侧浮动，即紧跟container右侧，然后再左侧偏移自身元素的宽度*/
}
</style>
</head>
<body>
<div id ="container">
<div id="main-content">main content</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</body>
</html>
则出现效果图:
屏幕快照 2018-01-13 下午5.48.36.png
下面分别解释注释掉的每一句：
1、
#container {
/* width:100%;100%才行，不能写死固定数据*/
margin: 0 auto;
overflow:hidden;
float:left;
}
如果不设置最外层容器的宽度，float:left属性会使最外层容器收缩到只包含容器内元素为止。如果写死固定数据则针对不同大小的浏览器界面显示会有问题。
2、
#main-content {
background:gray;
/* margin-left:200px; 与left产生10像素间隔*/
/* margin-right:200px; 与right产生10像素间隔*/
}
为左右两侧div留出显示位置。
3、
#left {
float:left; /*在container右侧浮动，即紧跟container右侧*/
width:190px;
background:red;
/* margin-left:-100%; 在container右侧浮动，即紧跟container右侧，然后再左侧偏移父元素的宽度*/
}
屏幕快照 2018-01-13 下午6.01.39.png
本文第一句话：当元素的width属性一定的时候，负margin会使元素左移。本例中就是left元素会左移到紧贴父元素container的左侧。
4、
#right {
float:left;
width:190px;
background:green;
/* margin-left:-190px; 在container右侧浮动，即紧跟container右侧，然后再左侧偏移自身元素的宽度*/
}
同理，right元素只需要左移自身元素的位置，使自己的最右边挨着父元素container的右侧即可。
双飞翼布局主要解决俩问题：1、三列布局，中间宽度自适应，两边定宽； 2、中间栏要在浏览器中优先展示渲染。
