利用偽物件選擇器E:after實現清除浮動效果

antzone發表於2017-03-14
物件

關於清除浮動已經是老生暢談的問題，文章實在是太多了，幾乎已經被談爛了。

這當然是因為浮動是不居中必須要用到的技巧，那麼清除浮動自然也是必須的，但是本章節還是要囉嗦一下，再次介紹一下清除浮動的方法的一種，因為它會用到之前比較少見的偽物件選擇器，希望能夠引起大家的注意。

先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<head>
<style type="text/css">
#box{
  width:300px;
  margin:0px auto;
  border:5px solid red;
}
#box .left{
  width:80px;
  height:50px;
  background:green;
  float:left;
  margin-left:10px;
}
#box .clear{clear:both}
</style>
</head>
<body>
<div id="box">
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="clear"></div>
</div>
</body>
</html>

上面的程式碼是一個普通的清除浮動的程式碼，雖然能夠實現清除浮動的功能，但是並不夠完美，因為會多出一個div標籤來，這樣會增加瀏覽器解讀的壓力，頁面不夠清爽，那麼就使用偽物件選擇器進行一下改造，程式碼如下:

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

上面的程式碼中，利用:after偽物件選擇器，建立一個偽元素，然後給這個偽元素設定設定內容為一個點，同時設定為塊級元素和clear:both這樣就實現了清除浮動的效果。

相關文章