[CSS] 解決 Float 的 Bug :clear:both

【如果覺得文章寫的好的話希望能按一下讚或分享喔】

由於我們在寫 CSS 時常常會出現一些 float 屬性的 Bug

許多人是使用以下語法來解決問題

<div style="clear:both"></div>

但是就會發現必須很笨的常常在 HTML 中插入此元素..

例如:

<div class="type2">
		<div class="element1">float的子區塊1</div>
		<div class="element2">float的子區塊2</div>
		<div style="clear:both"></div>
</div>

 

造成程式碼較難閱讀

我們該怎樣解決這個問題呢 ?

 

 

解法一:overflow:auto;

我們先來看一個範例

 

呈現結果:

image

 

程式碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>clear:both</title>

<style type="text/css">
	.type1{
		padding: 10px; background-color: #cecece; width: 400px;
	}
	.type2{
		padding: 10px; background-color: #cecece; width: 400px;
	}
	.type3{
		padding: 10px; background-color: #cecece; overflow: auto; width: 400px;"
	}
	.element1{
		float: left; color: #ffffff; background-color: #07a807; margin: 5px; height: 100px;
	}
	.element2{
		float: left; color: #ffffff; background-color: #336699; margin: 5px; height: 100px;
	}
</style>

<script type="text/javascript">
	<!--js內容-->
</script>

</head>
<body>
	
	<h1>未使用clear</h1>
	<div class="type1">
		<div class="element1">float的子區塊1</div>
		<div class="element2">float的子區塊2</div>
	</div>

	<div style="clear:both"></div>
	
	<h1>使用 clear</h1>
	<div class="type2">
		<div class="element1">float的子區塊1</div>
		<div class="element2">float的子區塊2</div>
		<div style="clear:both"></div>
	</div>	
	
	<h1>未使用clear</h1>
	<div style="clear:both"></div>
	
	<div class="type3">
		<div class="element1">float的子區塊1</div>
		<div class="element2">float的子區塊2</div>
	</div>
	
</body>
</html>

 

我們可以發現第一個父 Div ( type1) 因為沒有在裡面宣告 clear:both 屬性,造成區塊浮動產生問題

而 Type2 則是自行宣告了 clear:both ,但問題在於會讓程式碼變醜

而 Type3 則是在 CSS 設定了 overflow:auto; 的屬性,可成功解決問題

 

後來在網路上看到有高人分享一段語法,可全域解決這相關的問題

原文:http://umairj.com/68/css-clearfix-best-cross-browser-solution/

程式碼如下:

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}
 
.clearfix {
   display: inline-block;
}
 
html[xmlns] .clearfix {
   display: block;
}
 
* html .clearfix {
   height: 1%;
   overflow: visible;
}

 

可以直接無腦解決所有問題 XD

Related Posts Plugin for WordPress, Blogger...
【如果覺得文章寫的好的話希望能按一下讚或分享喔】

彭其捷

想要做出很棒的產品,所以我寫程式,也研究介面 (UI) 與使用者經驗 (UX),並思考管理的法則。

【Profile】http://about.me/divaka

twitter facebookgooglepluslinkedinbloggertumblrflickryoutubedribbblerssemail


Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/63/7692663/html/blog/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273