子元素浮動導致父元素沒有被撐開解決方案

antzone發表於2017-03-08

本章節主要針對初學者，因為對於稍有經驗的佈局人員來說，這都不是問題。

子元素浮動的情況下，可能會導致父元素沒有被撐開，先看一段程式碼例項:

[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:200px;
  border:1px solid red;
}
#inner{
  width:150px;
  height:50px;
  background:blue;
  float:left;
}
</style>  
</head>  
<body>  
<div id="box">
  <div id="inner"></div>
</div>
</body>  
</html>

在以上程式碼中，父元素很明顯沒有被撐開，下面介紹一下如何解決此問題。

解決方案一:

在父元素中新增如下程式碼:

[CSS] 純文字檢視 複製程式碼
overflow:hidden

解決方案二:

設定父元素的高度，可能這個方法有點笨拙:

[CSS] 純文字檢視 複製程式碼
height:50px;

解決方案三:

在浮動元素後面新增一個新的標籤用來清除浮動:

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

相關文章