*{margin:0;padding:0;}.container{width:1300px;保证金：0自动；背景色：#f90;}.header{宽度：1000px;高度：40px；保证金：0自动；背景颜色：#eee;}.main{宽度：1000px;边距：0px自动；background-color:#f60;}.box{/*设置.box的左右外边距为负目的是为了让最左边元素的margin-left和最右边元素的margin-right冲突*/margin:0-1.6666667%;}.box::after,.box::before{display:table;content:"";}.box::after{clear:both;}.item{width:30%;高度：200px；边距：20px1.6666667%；背景色：#f10；float:left;}如上图所示，中间有9个带间距的红色div，但是最左边和最右边没有间距。如果使用css3的flex布局很简单，但是如果要使用float布局，就需要一些特殊的技巧了。实现原理是红色的9个div向左浮动，左右边距为25px，父容器的左右边距为-25px，相当于拉长了父容器，从而实现了对齐两端的效果。这就是Bootstrap的网格系统的工作原理。Bootstrap要求我们.col-xx-xx的父容器需要是.row，.row的左右padding是-15px。示例代码*{margin:0;padding:0;}.container{width:1300px;保证金：0自动；背景色：#f90;}.header{宽度：1000px;高度：40px；保证金：0自动；背景颜色：#eee;}.main{宽度：1000px;边距：0px自动；background-color:#f60;}.box{/*设置.box的左右外边距为负目的是为了让最左边元素的margin-left和最右边元素的margin-right冲突*/margin:0-1.6666667%;}.box::after,.box::before{display:table;content:"";}.box::after{clear:both;}.item{width:30%;高度：200px；边距：20px1.6666667%；背景色：#f10；float:left;}后面的元素会和我对齐
