前端入門-day3(CSS中浮動和清除浮動)

寫在前面

浮動是CSS中一個相對比較麻煩的屬性，與之伴隨的一般是清除浮動。今天咱們一塊兒來搞定浮動。

常見的用法

事實上，當咱們將一個元素設置成浮動時，達到的效果以下圖：

這種版式相信你們都見過，不少雜誌都會採用這種左邊或者右邊插圖，文字環繞的效果。

另外一種常見的浮動的用法以下圖：

即在某一行內，使某一部分右對齊，一般不會用margin實現，而是使用浮動。

浮動帶來的問題

浮動的元素沒法撐開父元素，即致使高度坍塌！！

來看下面的例子：

<div class="container">
  <div class="son1"></div>
  <div class="son2"></div>
</div>

.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}

當較大的方塊浮動時，咱們能夠看到他沒法撐開父元素。一般狀況下這不是咱們想要的結果，由於這會致使佈局混亂。當父元素內的子元素所有浮動時尤爲明顯，父元素的高度會坍塌爲0。

清除浮動

所以，當咱們用到了浮動，又不想出現這種狀況的時候，就須要清除浮動。

清除浮動的方式可能有不少種，可是如今比較流行，我我的比較喜歡的方式以下：

首先，添加如下CSS：

.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

而後，在父容器上添加clearfix類，最後代碼以下：

<div class="container clearfix">
  <div class="son1"></div>
  <div class="son2"></div>
</div>

.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}
.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

獲得的效果以下：

浮動的元素就能夠撐開父容器的高度啦！

總結

• 浮動的元素沒法撐開父容器的高度，因此須要清除浮動
• 浮動能夠很簡單的實現右對齊。
• 浮動能夠很簡單的實現文字環繞效果。

所以，注意浮動的使用場景，而且在須要的時候清除浮動，就能夠很好的控制浮動啦~