關於css脫離標準文件流的兩種方式

牛奶戀上咖啡發表於2016-09-09
CSS

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">所謂脫離標準文件流</span><span style="background-color: rgb(255, 255, 255); font-family: SimSun; color: rgb(51, 51, 51); font-size: 16px; white-space: pre-wrap;">就是將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當做脫離文件流的元素不存在而進行定位</span><span style="background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-size: 16px; white-space: pre-wrap; font-family: "Microsoft YaHei", arial, "courier new", courier, 宋體, monospace;">。</span>

不浮動的盒子會無視浮動的盒子，假使現有兩個盒子，一個浮動一個不浮動，則浮動的盒子會覆蓋不浮動的盒子。如下程式碼的結果所示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮動</title>
	<style type="text/css">
	body{
		margin:0px;
	}
	.first
	{
		background-color: #ccc;
		float:left;
		width:200px;
		height:200px;
	}
	.second
	{
		background-color: blue;
		width:250px;
		height:250px;
	}
	</style>


</head>
<body>
	<div class="first"></div>
	
	<div class="second"></div>
</body>
</html>
結果如圖：
盒子元素會無視浮動的元素，但是盒子元素裡面的文字並不會無視浮動元素，如下圖所示：


可以看到藍色背景色盒子裡的文字注意到了這個浮動元素於是在盒子裡右推的形式圍繞在浮動盒子的周圍。

此外，一旦一個元素浮動了，那麼他就可以設定寬高，可以並排，無論原來他是塊級元素還是行內元素。當浮動元素裡面有文字時，浮動元素不會覆蓋文字，文字會圍繞浮動元素顯示。

關於清除浮動，為什麼要清除浮動呢？舉一個自己遇到的例子，程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合佈局</title>
<style>
body{ margin:0; padding:0; font-size:10px; font-weight:bold}
div{ text-align:center; line-height:50px}
.head,.main{ width:200px;margin:0 auto;}
.head{ height:100px; background:#F90}
.left{ width:80px; height:60px; background:#ccc;float:left;}
.right{ width:120px; height:60px;background:#FCC; float:right}
.r_sub_left{ width:60px; height:60px; background:#9C3; float:left}
.r_sub_right{ width:60px; height:60px; background:#9FC; float:right;}
.footer{width:400px; height:50px; background:#9F9;margin:0 auto;}
</style>
</head>

<body>
<div class="head">head</div>
<div class="main">
    <div class="left">left</div>
    <div class="right">
    	<div class="r_sub_left">sub_left
        </div>
        <div class=" r_sub_right">sub_right
        </div>
    </div>
</div>
<div class="footer">footer</div>
</body>
</html>
執行後看到如下結果：


尷尬了，注意到footer的盒子飄到上面去了，只剩下文字孤零零的在下面，這是為什麼呢？因為left和right均設定為浮動的狀態，而main並沒有設定高度，可以想象為一條線在head的下面，這樣footer自然無視left和right兩個浮動元素然後飄到上面去了，這是我們需要進行float清除，清除的方式有一下幾種，如下：清除浮動的方法綜合一下答案：
一、clear:both(/left/right);
二、overflow:hidden;width:100%;

三 、：after
四、給main設定高度：.main{width:960px; {height:600px};margin:0 auto;}
五、：margin:600px 0 0 0;

詳見：http://my.oschina.net/leipeng/blog/221125
推薦使用方法一和方法二，在給footer使用overflow的時候，千萬不要忘記設定它的寬度。

其中clear:both清除浮動 值描述
left 在左側不允許浮動元素。
right 在右側不允許浮動元素。
both 在左右兩側均不允許浮動元素。
none 預設值。允許浮動元素出現在兩側。
inherit 規定應該從父元素繼承 clear 屬性的值。

overflow 屬性規定當內容溢位元素框時發生的事情。
值描述
visible 預設值。內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，並且其餘內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。

脫離文字的第二種方式是絕對定位（position:absolute):相比於float，position:absolute不管是文字還是盒子都會直接無視掉浮動元素，將float:left換為position:absolute後可以看到如下結果：


相關文章