1. 左右布局

利用float完成左右布局，由于用了float出现了父元素高度崩塌BUG，要用cf解决BUG。

 <div class="father cf">
    <div class="son-left">1</div>
    <div class="son-right">2</div>
  </div>

.father {
  border:5px black solid;
  background: #ccc;
}
.son-left {
  background: pink;
  float:left;
  height: 100px;
  width: 40%;
}
.son-right {
  background: skyblue;
  float:right;
  height: 200px;
  width: 60%;
}
.cf::before,::after {
    content: '';
    display: block;
}
.cf:after {
    clear: both;
}

左右布局

2. 左中右布局

2.1 全部float

与左右布局同样，额外补充中部盒子就可以

2.2 子绝+父相

左右用position: absolute;中用左右margin，此时触发absolute的BUG，父元素添加position: relative;解决BUG。

<div class="father">
  <div class="son-left">1</div>
  <div class="son-middle">2</div>
  <div class="son-right">3</div>
</div>

.father {
  border:5px black solid;
  background: #ccc;
  position: relative;
}
.son-left {
  background: pink;
  position: absolute;
  left:0;
  top:0;
  height: 100px;
  width: 100px;
}
.son-right {
  background: skyblue;
  position: absolute;
  right:0;
  top:0;
  height: 100px;
  width: 100px;
}
.son-middle {
  margin-left:100px;
  margin-right:100px;  
  height: 100px;
  background: hotpink;
}

3 水平居中&垂直居中

3.1 左右margin

子元素只能是block才能使用

<div class="father">
  <div class="son">2</div>
</div>

.father {
  border:5px black solid;
  margin:100px;
  background: #ccc;
}
.son {
  display:block;
  margin:20px auto;
  width: 100px;
  height: 100px;
  border:1px red solid;
  background-color: pink;
}

左右margin

3.2 更改定位

相对于左右margin，inline-block可以用更改定位，利用left和top:50%，再用transform: translate(-50%,-50%)回调。

<div class="father">
  <div class="son">
    434343
  </div>

.father {
  border:5px black solid;
  margin:100px;
  background: #ccc;
  height: 300px;
}
.son {
  position: relative;
  display: inline-block;
  top:50%;
  left:50%;
  width: 100px;
  height: 100px;
  border:1px red solid;
  background-color: pink;
  transform: translate(-50%,-50%)
}

更改定位

3.3 父元素text-align:text

子元素只能是inline和inline-block，非常容易出现BUG，慎用。

<div class="father">
  <div class="son">
  </div>
</div>

.father {
  border:5px black solid;
  margin:100px;
  background: #ccc;
  text-align:center;
}
.son {
  display:inline-block;
  width: 100px;
  height: 100px;
  border:1px red solid;
  background-color: pink;
}

父元素text-align:text

4.其他

4.1 clear:both清除浮动

由于浮动，浮动的脱标，父元素失去高度出现崩塌，父元素之后的元素也会紧跟着浮动，利用clear:both来消除bug。

代码见1.左右布局

4.2 待补充