CSS布局常用小窍门这是我们发现ad块掉下面来了，此时因为border-box的关系，border线框占了2个像素，只要

用outline替代border
消除父元素高度坍塌（clearfix;或overflow:hidden;）
用负margin来实现平均布局

用outline替代border

当我们实现没有间隔的布局时，通过计算子元素的width的和等于父元素的width实现布局时：

代码为：

//html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="father clearfix">
  <div class="aside"></div>
  <div class="main"></div>
  <div class="ad"></div>
</div>
</body>
</html>

//css
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.father {
  border: 1px solid red;
  width: 400px;
  height: 300px;
  margin: 50px;
}
.aside{
  border: 1px solid black;
  width: 100px;
  height: 200px;
  float: left;
  margin-top: 20px;
  background-color:blue;
}

.main{
  border: 1px solid black;
  width: 200px;
  height: 200px;
  float: left;
  margin-top: 20px;
  background-color:grey;
}
.ad{
  border: 1px solid black;
  width: 100px;
  height: 200px;
  float: left;
  margin-top: 20px;
  background-color:green;
}

这是我们发现ad块掉下面来了，此时因为border-box的关系，border线框占了2个像素，只要把border改成outline(outline不占空间)即可。

消除父元素高度坍塌

代码如图下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div class="father">
    <div class="son">你好</div>
  </div>
</body>

</html>

.father {
  border: 1px solid red;
 
  width: 300px;
  background-color: gray;
}
.son {
  color: red;
  float: right;
}

此时却发现父元素没有将子元素包裹住

因为在子元素使用了float使之脱离了文档流，所以使得父元素撑不开，我们只需要在父元素上加上：clearfix;或overflow:hidden;即可。

用负margin来实现平均布局

当我们要把几个块元素平均布局到父元素中，首先要计算好子元素的width和（300px）加间距之和(40px)等于父元素的width（340px），代码：demo

实现效果见图：

我们明明算好的为什么会这样呢？那是因为最后一个子元素块他没有位置让他有右边距，所以他只能往下，所以我们只要把右边距扩展20px即可，如何做到呢？

我们可以用新增一个div包裹住三个小的div，用负margin把右边距扩大20px即可，详见代码：demo1

效果见图：

前端小白请留言指正！！！