CSS float

前言

使用float可以让元素浮起来~原本block会撑满父元素的宽，现在不会发生了，变得有点像inline-block的样子，元素开始会水平排列。

float比较常用的有

float:left; //向左排列
float:right; //向右排列

在未设定float之前，每一个元素都占满了父元素的宽

<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
</section>

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 50px;
  height: 50px;
}

.left {
  background: pink;
}

.right {
  background: cyan;
}

再设定float之後，元素依据float的方向从父元素的边界开始排列

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 50px;
  height: 50px;
}

.left {
  float:left;
  background: pink;
}

.right {
  float:right;
  background: cyan;
}

但可以发现父元素被压扁了~原因是子元素都浮动起来，没有内容物撑开父元素。
所以我们需要在最後解除浮动~

section:after{
  content:'';
  display:table;
  clear:both;
}