浮動

CSS中的float屬性用來指定一個元素向左或向右浮動。浮動元素脫離文檔的普通流，向左或向右移動，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
浮動元素周圍的非浮動的塊級元素按正常方式放置，就好像浮動元素不存在一樣。但文本和行內(nèi)元素會為浮動元素讓出位置，圍繞著浮動元素。

示例1

<div class="container">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
</div>

p {
  margin: 0;
}

.container {
  width: 400px;
  border: 1px solid black;
  padding: 10px
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 2px 4px;
}

.box1{
  float: left;
}

.box2, .box3 {
  float: right;
}

如果包含框沒有足夠的寬度，后面的浮動元素會向下移動，如果浮動元素的高度不同，后面的浮動元素可能會被卡住

示例2

p {
  margin: 0;
}

.container {
  width: 300px;
  border: 1px solid black;
  padding: 10px
}

.box{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 2px;
  float: left;
}

.box2 {
  height: 90px;
}

這里要注意的：

• 如果包含元素有padding，浮動元素會左右移動直到它的margin外邊緣接觸到包含元素的padding的內(nèi)邊緣
• 浮動的塊級元素寬度不再占據(jù)整行，而是默認(rèn)收縮到其內(nèi)容的寬度

清除浮動

如果浮動元素的高度大于它們所在的父容器元素，由于浮動元素脫離文檔流，無法撐開父元素高度，會使父元素的高度塌陷。這時就需要進(jìn)行清除浮動。

清除浮動的方式主要有

• 在浮動元素后面加上一個空的div，設(shè)置clear屬性
• 使用父容器元素的::after偽元素

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

• 使用BFC（塊格式化上下文），例如對父元素使用

overflow: hidden;