清除 CSS float 浮動的4種方式

清除浮動的4種方式
假如一段HTMLcode是這樣

<div class="wrap">
    我是父元素
  <div class="r">我是右浮動</div>
  <div class="l">我是左浮動</div>
</div>

CSS是這樣

.wrap{
  width: 600px;
  background-color: #ccc;
  color:#fff;
  font-size: 20px;
  padding: 10px;
}
.l{
  float:left;
  background-color: darkgreen;
  width: 200px;
  height: 100px;
}
.r{
  float:right;
  background-color: darkred;
  height: 100px;
  width: 200px;
}

網頁看起來會長這樣

父元素無法正常把高度展開填滿，是因為兩個子元素都有設浮動，有沒有辦法解決這種方式呢?

1.父元素設置高度
把CSS，父元素的部分增加高度

.wrap{
  width: 600px;
 height:100px;
  background-color: #ccc;
  color:#fff;
  font-size: 20px;
  padding: 10px;
}

但這樣寫是錯誤的!
父元素應該正常依照子元素高度而撐開，所以父元素設置高度非常不推薦!

2.父元素內的最底部，新增一個空元素並設置輕浮動
把HTML改成

<div class="wrap">
    我是父元素
  <div class="r">我是右浮動</div>
  <div class="l">我是左浮動</div>
  <div class="clearfix"></div>    
</div>

然後CSS新增一段

.clear{
    clear:both;
 }

這樣就完成清除浮動囉
這時網頁會變成

這樣就正常囉!!

但是這種方式有點過時了，並不是主流的清除浮動方式

3.父元素CSS設置overflow:hidden;
在父元素wrap的css設置overflow:hidden;

.wrap{
  width: 600px;
  background-color: #ccc;
  overflow:hidden;
  color:#fff;
  font-size: 20px;
  padding: 10px;
}

這樣網頁也會變成這樣

4.用偽元素清除浮動
替父元素設置css偽元素清除浮動

.wrap:after{
  content: "";
  display: block;
  height: 0;
  clear: both;
  }

4是最主流的方式!!