CSS如何清除浮動的方法和優缺點

admin發表於2017-02-10
CSS

介紹清除浮動之前，首先介紹一下為什麼要清除浮動。元素浮動之後可以左右移動，直到遇到父元素的邊緣或者另一個浮動元素，浮動元素會脫離文件流對塊級元素的佈局沒有影響，但對內聯元素和文字有影響。例如，當一個父元素的子元素浮動之後，脫離文件流，導致父元素塌陷，例項如下:

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

子元素由於使用浮動，脫離文件流，那麼不會對父元素的佈局產生影響，導致父元素塌陷。由此可見清除浮動是必須的；下面介紹一下清除浮動的幾種方式：

方式一:

新增額外的標籤:

此方式在浮動元素的末尾新增一個空標籤，例如:

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

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.parent{border:2px solid green;}
.children{
  width:100px;
  height:100px;
  background-color:red;
  float:left;
}
</style>
</head>
<body>
<div class="parent">
  <div class="children"></div>
  <div style="clear:both"></div>
</div>
</body>
</html>

優點是比較簡單，容易理解掌握；缺點是新增了額外的標籤，不符合內容表現分類原則。

方式二:

利用<br/>標籤自帶的clear屬性清除浮動，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.parent{border:2px solid green;}
.children{
  width:100px;
  height:100px;
  background-color:red;
  float:left;
}
</style>
</head>
<body>
<div class="parent">
  <div class="children"></div>
  <br clear="all"/>
</div>
</body>
</html>

在浮動元素的後面新增<br>標籤，將clear屬性值設定為all。

優點是程式碼比較少，缺點是也增加的了額外的標籤，不利於表現和內容分離原則。

方式三:

將父元素的overflow屬性值設定為auto或者hidden，IE6並不支援此方式，需要出發IE6的haslayout屬性才可以。

例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.parent{ 
  border:2px solid green; 
  overflow:hidden; 
  *zoom:1; 
} 
.children{ 
  width:100px; 
  height:100px; 
  background-color:red; 
  float:left; 
} 
</style> 
</head> 
<body> 
<div class="parent"> 
  <div class="children"></div> 
</div> 
</body> 
</html>

overflow:hidden對IE6並沒有清除浮動的功能，所以需要觸發IE6的haslayout屬性，新增*zoom:1即可。

優點是沒有增加額外的標籤，並且程式碼量也不多，缺點是可能會導致一些意外的效果，需要對頁面多加測試。

方式四:

將父元素設定浮動，例項如下:

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

優點是沒有新增額外標籤，程式碼簡短，但是容易破壞佈局結構。

方式五:

使用:after清除浮動，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.parent{border:2px solid green;} 
.parent:after{
  content:".";
  display:block;
  height:0;
  visibility:hidden;
  clear:both;
} 
.parent{*zoom:1;} 
.children{ 
  width:100px; 
  height:100px; 
  background-color:red; 
  float:left; 
} 
</style> 
</head> 
<body> 
<div class="parent"> 
  <div class="children"></div> 
</div> 
</body> 
</html>

以上程式碼中使用:after可以清除浮動，但是IE6和IE7不支援此屬性，所以需要使用*zoom:1相容IE6和IE7。

這是最為推薦的清除浮動的方式。

相關文章