清除浮動與閉合浮動區別

admin發表於2018-08-25

關於浮動方面的基本介紹可以參閱如下兩篇文章：

（1）.CSS float浮動一章節。

（2）.CSS清除浮動一章節。

關於浮動的文章非常多，但是好像絕大多數將清除浮動和閉合浮動看做是完全一樣的動作，因為即便是看做完全一樣，也不一樣工作，因為消除浮動影響的措施就那麼幾條，只要使用得當就可以實現正確佈局。

但是作為嚴謹的程式設計人員，最好還是要理解它們之間的差別，下面通過程式碼例項做一下介紹。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.box{
  width:300px;
  height:30px;
  border:1px solid red;
}
.a,.b{
  width:100px;
  height: 60px;
}
.a{
  float: left;
  background-color: blue;
}
.b{
  float: left;
  background-color: green;
}
</style>
</head>
<body>
<div class="box">
  <div class="a"></div>
  <div class="b"></div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/25/002926rcjf6k9c8tvr43zp.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

兩個子元素採用浮動，沒有消除浮動影響，兩個脫離文件流，很自然的父元素沒有被撐開。

在上述程式碼的基礎上，底部再新增一個元素，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.box{
  width:300px;
  height:30px;
  border:1px solid red;
}
.a,.b{
  width:100px;
  height: 60px;
}
.a{
  float: left;
  background-color: blue;
}
.b{
  float: left;
  background-color: green;
}
.add{
  width:300px;
  height:30px;
  background-color: #ccc;
}
</style>
</head>
<body>
<div class="box">
  <div class="a"></div>
  <div class="b"></div>
</div>
<div class="add"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/25/003021yra35r5tt5lpp5ma.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

還是由於浮動脫離文件流的原因，導致add元素緊貼著box元素，程式碼修改如下：

[HTML] 純文字檢視 複製程式碼
<div class="add" style="clear:both"></div>

為了節省篇幅，程式碼只給出了改動的部分，為add元素新增style="clear:both"。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/25/003057twedkdud5wa5our3.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面有兩個問題需要解答：

（1）.上面是清除浮動還是閉合浮動。

（2）.為什麼add元素清楚了浮動，box元素依然處於塌陷狀態，clear的作用範圍是什麼。

第一個問題，清除浮動，結合下文對閉合浮動的介紹更容易理解。

第二個問題，clear:both可以消除當前元素前面的浮動元素對它的影響，但是不能夠消除當前元素內部浮動元素或者其他塊級格式化上下文元素中浮動元素的影響。box元素並沒有觸發BFC（塊級格式化上下文），所以add元素的clear:both會對a和b生效。關於塊級格式化上下文可以參閱CSS BFC塊級格式化上下文一章節。

閉合浮動：

所謂閉合浮動就是消除浮動元素導致父元素塌陷沒有被撐開的現象。

最通俗的理解就是將父元素將浮動的元素包裹閉合起來。

常用的方式如下：

（1）.給容器元素新增overflow或者float等屬性以觸發BFC。

（2）.在同級浮動元素的後面加入帶有clear:both設定的元素或者偽元素。

更多閉合浮動操作內容可以參閱CSS清除浮動一章節。

相關文章