css清除浮動程式碼例項演示

antzone發表於2017-03-08
CSS

在頁面中如果採用了浮動，那麼清除浮動則是必須要進行的操作，否則可能引起一些意想不到的後果。

本章節不會對浮動或者清除浮動的原理做介紹，只是分享一下清除浮動的幾段程式碼，因為有些朋友可能需要的就是一個程式碼例項，關於浮動或者清除清除浮動的相關內容可以參閱相關閱讀。

一.使用overflow清除浮動:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
#box{
  list-style:none;
  width:150px;
  overflow:hidden;
  border:1px solid red;
  margin:50px;
}
#box li{float:left;}
</style>
</head>
<body>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body>
</html>

在父元素上新增overflow:hidden即可清除浮動。

二.在浮動元素後面新增一個空標籤:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
#box{
  list-style:none;
  width:150px;
  overflow:hidden;
  border:1px solid red;
  margin:50px;
}
#box li{float:left;}
.clear{clear:both}
</style>
</head>
<body>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <div class="clear"></div>
</ul>
</body>
</html>

三.各大網站最為推薦的一個方式:

[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;}   
.clearfix{*zoom:1;}   
.clearfix:after{  
  content:".";  
  display:block;  
  height:0;  
  visibility:hidden;  
  clear:both;  
} 
.children{   
  width:100px;   
  height:100px;   
  background-color:red;   
  float:left;   
}   
.right{ 
  width:100px;   
  height:100px;   
  background-color:blue;  
  float:right  
} 
</style>   
</head>   
<body>   
<div class="parent clearfix">   
  <div class="children"></div>  
  <div class="right"></div>  
</div>   
</body>   
</html>

相關文章