css浮動詳解

Joerrot發表於2019-03-17
CSS

塊級元素和行內元素（標籤的分類）

上圖中可以看到，h1標籤是塊級元素，佔據了整行，span標籤是行內元素，只佔據內容這一部分。

現在我們嘗試給兩個標籤設定寬高。效果如下：

上圖中，我們嘗試給兩個標籤設定寬高，但發現，寬高屬性只對塊級元素h1生效。於是我們可以做出如下總結。

行內元素和塊級元素的區別：（非常重要）

行內元素：

  • 與其他行內元素並排；
  • 不能設定寬、高。預設的寬度，就是文字的寬度。

塊級元素：

  • 霸佔一行，不能與其他任何元素並列；
  • 能接受寬、高。如果不設定寬度，那麼寬度將預設變為父親的100%。

塊級元素和行內元素的分類：

在以前的HTML知識中，我們已經將標籤分過類，當時分為了：文字級、容器級。

從HTML的角度來講，標籤分為：

  • 文字級標籤：p、span、a、b、i、u、em。
  • 容器級標籤：div、h系列、li、dt、dd。

PS：為甚麼說p是文字級標籤呢？因為p裡面只能放文字&圖片&表單元素，p裡面不能放h和ul，p裡面也不能放p。

現在，從CSS的角度講，CSS的分類和上面的很像，就p不一樣：

  • 行內元素：除了p之外，所有的文字級標籤，都是行內元素。p是個文字級，但是是個塊級元素。

  • 塊級元素：所有的容器級標籤都是塊級元素，還有p標籤。

我們把上面的分類畫一個圖，即可一目瞭然：

塊級元素和行內元素的相互轉換

我們可以通過display屬性將塊級元素和行內元素進行相互轉換。display即“顯示模式”。

塊級元素可以轉換為行內元素：

一旦，給一個塊級元素（比如div）設定：

那麼，這個標籤將立即變為行內元素，此時它和一個span無異。inline就是“行內”。

也就是說：

  • 此時這個div不能設定寬度、高度；
  • 此時這個div可以和別人並排了。

舉例如下：

行內元素轉換為塊級元素：

同樣的道理，一旦給一個行內元素（比如span）設定：

display: block;

那麼，這個標籤將立即變為塊級元素，此時它和一個div無異。block”是“塊”的意思。也就是說：

  • 此時這個span能夠設定寬度、高度
  • 此時這個span必須霸佔一行了，別人無法和他並排
  • 如果不設定寬度，其寬度將撐滿父容器

舉例如下：

巨集觀地講，我們的web頁面和photoshop等設計軟體有本質的區別：web頁面的製作，是個“流”，必須從上而下，像“織毛衣”。而設計軟體，想往哪裡畫個東西，都能畫。

標準文件流的特性

我們來看看標準流有哪些微觀現象。

（1）空白摺疊現象：

無論多少個空格、換行、tab，都會摺疊為一個空格。

比如，如果我們想讓img標籤之間沒有空隙，必須緊密連線：

<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />

（2）高矮不齊，底邊對齊：

舉例如下：

（3）自動換行，一行寫不滿，換行寫。

標準流裡面的限制非常多，導致很多頁面效果無法實現。如果我們現在就要並排、並且就要設定寬高，那該怎麼辦呢？辦法是：移民！脫離標準流！

css中一共有三種手段，使一個元素脫離標準文件流：

  • （1）浮動
  • （2）絕對定位
  • （3）固定定位

這便引出我們今天要講的內容：浮動。

浮動

浮動是css裡面佈局用的最多的屬性。

現在有兩個div，分別設定寬高。我們知道，它們的效果如下：

此時，如果給這兩個div增加一個浮動屬性，比如float: left;，效果如下：

這就達到了浮動的效果。此時，兩個元素並排了，並且兩個元素都能夠設定寬度、高度了（這在上一段的標準流中，不能實現）。

浮動想學好，一定要知道三個性質。接下來講一講。

性質1：浮動的元素脫標

脫標即脫離標準流。我們來看幾個例子。

證明1：

上圖中，在預設情況下，兩個div標籤是上下進行排列的。現在由於float屬性讓上圖中的第一個<div>標籤出現了浮動，於是這個標籤在另外一個層面上進行排列。而第二個<div>還在自己的層面上遵從標準流進行排列。

證明2：

上圖中，span標籤在標準流中，是不能設定寬高的（因為是行內元素）。但是，一旦設定為浮動之後，即使不轉成塊級元素，也能夠設定寬高了。

所以能夠證明一件事：一旦一個元素浮動了，那麼，將能夠並排了，並且能夠設定寬高了。無論它原來是個div還是個span。所有標籤，浮動之後，已經不區分行內、塊級了。

性質2：浮動的元素互相貼靠

我們來看一個例子就明白了。

我們給三個div均設定了float: left;屬性之後，然後設定寬高。當改變瀏覽器視窗大小時，可以看到div的貼靠效果：

上圖顯示，3號貼左牆的時候，並不會往1號裡面擠。

同樣，float還有一個屬性值是right，這個和屬性值left是對稱的。

性質3：浮動的元素有“字圍”效果

來看一張圖就明白了。我們讓div浮動，p不浮動。

上圖中，我們發現：div擋住了p，但不會擋住p中的文字，形成“字圍”效果。

總結：標準流中的文字不會被浮動的盒子遮擋住。（文字就像水一樣）

關於浮動我們要強調一點，浮動這個東西，為避免混亂，我們在初期一定要遵循一個原則：永遠不是一個東西單獨浮動，浮動都是一起浮動，要浮動，大家都浮動。

性質4：收縮

收縮：一個浮動的元素，如果沒有設定width，那麼將自動收縮為內容的寬度（這點非常像行內元素）。

舉例如下：、

上圖中，div本身是塊級元素，如果不設定width，它會單獨霸佔整行；但是，設定div浮動後，它會收縮

浮動的補充（做網站時注意）

上圖所示，將para1和para2設定為浮動，它們是div的兒子。此時para1+para2的寬度小於div的寬度。效果如上圖所示。可如果設定para1+para2的寬度大於div的寬度，我們會發現，para2掉下來了：

來個大實踐吧：

為實現上方效果，程式碼如下：

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.header{
			width: 970px;
			height: 103px;
			/*居中。這個語句的意思是：居中：*/
			margin: 0 auto;
		}
		.header .logo{
			float: left;
			width: 277px;
			height: 103px;
			background-color: red;
		}
		.header .language{
			float: right;
			width: 137px;
			height: 49px;
			background-color: green;
			margin-bottom: 8px;
		}
		.header .nav{
			float: right;
			width: 679px;
			height: 46px;
			background-color: green;
		}

		.content{
			width: 970px;
			height: 435px;
			/*居中，這個語句今天沒講，你照抄，就是居中：*/
			margin: 0 auto;
			margin-top: 10px;
		}
		.content .banner{
			float: left;
			width: 310px;
			height: 435px;
			background-color: gold;
			margin-right: 10px;
		}
		.content .rightPart{
			float: left;
			width: 650px;
			height: 435px;
		}
		.content .rightPart .main{
			width: 650px;
			height: 400px;
			margin-bottom: 10px;
		}
		.content .rightPart .links{
			width: 650px;
			height: 25px;
			background-color: blue;
		}
		.content .rightPart .main .news{
			float: left;
			width: 450px;
			height: 400px;
		}
		.content .rightPart .main .hotpic{
			float: left;
			width: 190px;
			height: 400px;
			background-color: purple;
			margin-left: 10px;
		}
		.content .rightPart .main .news .news1{
			width: 450px;
			height: 240px;
			background-color: skyblue;
			margin-bottom: 10px;
		}
		.content .rightPart .main .news .news2{
			width: 450px;
			height: 110px;
			background-color: skyblue;
			margin-bottom: 10px;
		}
		.content .rightPart .main .news .news3{
			width: 450px;
			height: 30px;
			background-color: skyblue;
		}
		.footer{
			width: 970px;
			height: 35px;
			background-color: pink;
			/*沒學，就是居中：*/
			margin: 0 auto;
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<!-- 頭部 -->
	<div class="header">
		<div class="logo">logo</div>
		<div class="language">語言選擇</div>
		<div class="nav">導航條</div>
	</div>

	<!-- 主要內容 -->
	<div class="content">
		<div class="banner">大廣告</div>
		<div class="rightPart">
			<div class="main">
				<div class="news">
					<div class="news1"></div>
					<div class="news2"></div>
					<div class="news3"></div>
				</div>
				<div class="hotpic"></div>
			</div>
			<div class="links"></div>
		</div>
	</div>

	<!-- 頁尾 -->
	<div class="footer"></div>
</body>
</html>

其實，這個頁面的佈局是下面這個網站：

浮動的清除 

這裡所說的清除浮動，指的是清除浮動與浮動之間的影響。

前言

通過上面這個例子，我們發現

，此例中的網頁就是通過浮動實現並排的。

比如說一個網頁有header、content、footer這三部分。就拿content部分來舉例，如果設定content的兒子為浮動，但是，這個兒子又是一個全新的標準流，於是兒子的兒子仍然在標準流裡。

從學習浮動的第一天起，我們就要明白，浮動有開始，就要有清除。我們先來做個實驗。

下面這個例子，有兩個塊級元素div，div沒有任何屬性，每個div裡有li，效果如下：

從學習浮動的第一天起，我們就要明白，浮動有開始，就要有清除。我們先來做個實驗。

下面這個例子，有兩個塊級元素div，div沒有任何屬性，每個div裡有li，效果如下：

上面這個例子很簡單。可如果我們給裡面的<li>標籤加浮動。效果卻成了下面這個樣子：

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{

		}
		li{
			float: left;
			width: 100px;
			height: 20px;
			background-color: pink;


		}
	</style>
</head>
<body>
	<div class="box1">
		<ul>
			<li>生命壹號1</li>
			<li>生命壹號2</li>
			<li>生命壹號3</li>
			<li>生命壹號4</li>
		</ul>
	</div>
	<div class="box2">
		<ul>
			<li>許嵩1</li>
			<li>許嵩2</li>
			<li>許嵩3</li>
			<li>許嵩4</li>
		</ul>
	</div>
</body>
</html>

效果如下：

上圖中，我們發現：第二組中的第1個li，去貼靠第一組中的最後一個li了（我們本以為這些li會分成兩排）。

這便引出我們要講的：清除浮動的第一種方式。 那該怎麼解決呢？

方法1：給浮動元素的祖先元素加高度

造成前言中這個現象的根本原因是：li的父親div沒有設定高度，導致這兩個div的高度均為0px（我們可以通過網頁的審查元素進行檢視）。div的高度為零，導致不能給自己浮動的孩子，撐起一個容器。

撐不起一個容器，導致自己的孩子沒辦法在自己的內部進行正確的浮動。

好，現在就算給這個div設定高度，可如果div自己的高度小於孩子的高度，也會出現不正常的現象：

給div設定一個正確的合適的高度（至少保證高度大於兒子的高度），就可以看到正確的現象：

總結：

如果一個元素要浮動，那麼它的祖先元素一定要有高度。

有高度的盒子，才能關住浮動。（記住這句）

只要浮動在一個有高度的盒子中，那麼這個浮動就不會影響後面的浮動元素。所以就是清除浮動帶來的影響了。

方法2：clear:both;

網頁製作中，高度height其實很少出現。為什麼？因為能被內容撐高！也就是說，剛剛我們講解的方法1，工作中用得很少。

那麼，能不能不寫height，也把浮動清除了呢？也讓浮動之間，互不影響呢？

這個時候，我們可以使用clear:both;這個屬性。如下：

clear就是清除，both指的是左浮動、右浮動都要清除。clear:both的意思就是：不允許左側和右側有浮動物件。

這種方法有一個非常大的、致命的問題，它所在的標籤，margin屬性失效了。讀者可以試試看。

margin失效的本質原因是：上圖中的box1和box2，高度為零。

方法3：隔牆法

上面這個例子中，為了防止第二個div貼靠到第二個div，我們可以在這兩個div中間用一個新的div隔開，然後給這個新的div設定clear: both;屬性；同時，既然這個新的div無法設定margin屬性，我們可以給它設定height，以達到margin的效果（曲線救國）。這便是隔牆法。

我們看看例子效果就知道了：

上圖這個例子就是隔牆法。

內牆法：

近些年，有演化出了“內牆法”：

上面這個圖非常重要，當作內牆法的公式，先記下來。

為了講內牆法，我們先記住一句重要的話：一個父親是不能被浮動的兒子撐出高度的。舉例如下：

（1）我們在一個div裡放一個有寬高的p，效果如下：（很簡單）

（2）可如果在此基礎之上，給p設定浮動，卻發現父親div沒有高度了：

（3）此時，我麼可以在div的裡面放一個div（作為內牆），就可以讓父親div恢復高度：

接著來看一個例子：

與外牆法相比，內牆法的優勢（本質區別）在於：內牆法可以給它所在的家撐出寬度（讓box1有高）。即：box1的高度可以自適應內容。

而外牆法，雖然一道牆可以把兩個div隔開，但是這兩個div沒有高，也就是說，無法wrap_content。

清除浮動方法4：overflow:hidden;

我們可以使用如下屬性：

overflow:hidden;

overflow即“溢位”， hidden即“隱藏”。這個屬性的意思是“溢位隱藏”。顧名思義：所有溢位邊框的內容，都要隱藏掉。如下：

上圖顯示，overflow:hidden;的本意是清除溢位到盒子外面的文字。但是，前端開發工程師發現了，它能做偏方。如下：

一個父親不能被自己浮動的兒子，撐出高度。但是，只要給父親加上overflow:hidden; 那麼，父親就能被兒子撐出高了。這是一個偏方。

舉個例子：

那麼對於前言中的例子，我們同樣可以使用這一屬性：

浮動清除的總結

我們在上一段講了四種清除浮動的方法，本段來進行一個總結。

浮動的元素，只能被有高度的盒子關住。 也就是說，如果盒子內部有浮動，這個盒子有高，那麼妥妥的，浮動不會互相影響。

1、加高法

工作上，我們絕對不會給所有的盒子加高度，這是因為麻煩，並且不能適應頁面的快速變化。

2、clear:both;法

最簡單的清除浮動的方法，就是給盒子增加clear:both；表示自己的內部元素，不受其他盒子的影響。

浮動確實被清除了，不會互相影響了。但是有一個問題，就是margin失效。兩個div之間，沒有任何的間隙了。

3、隔牆法

在兩部分浮動元素中間，建一個牆。隔開兩部分浮動，讓後面的浮動元素，不去追前面的浮動元素。 牆用自己的身體當做了間隙。

<div>
	<p></p>
	<p></p>
	<p></p>
</div>

<div class="cl h10"></div>

<div>
	<p></p>
	<p></p>
	<p></p>
</div>

我們發現，隔牆法好用，但是第一個div，還是沒有高度。如果我們現在想讓第一個div，自動根據自己的兒子撐出高度，我們就要想一些“小伎倆”。

內牆法：

<div>
	<p></p>
	<p></p>
	<p></p>
	<div class="cl h10"></div>
</div>

<div>
	<p></p>
	<p></p>
	<p></p>
</div>

內牆法的優點就是，不僅僅能夠讓後部分的p不去追前部分的p了，並且能把第一個div撐出高度。這樣，這個div的背景、邊框就能夠根據p的高度來撐開了。

4、overflow:hidden

這個屬性的本意，就是將所有溢位盒子的內容，隱藏掉。但是，我們發現這個東西能夠用於浮動的清除。 我們知道，一個父親，不能被自己浮動的兒子撐出高度，但是，如果這個父親加上了overflow:hidden；那麼這個父親就能夠被浮動的兒子撐出高度了。這個現象，是瀏覽器的偏方。 並且,overflow:hidden;能夠讓margin生效。

更詳細的可見：overflow:hidden 的介紹。

清除浮動的例子：

我們現在舉個例子，要求實現下圖中無序列表部分的效果：

對比一下我們講的四種清除浮動的方法。如果用外牆法，ul中不能插入div標籤，因為ul中只能插入li，如果插入li的牆，會浪費語義。如果用內牆法，不美觀。綜合對比，還是用第四種方法來實現吧，這會讓標籤顯得極其乾淨整潔：

上面例項中，行內元素加上了浮動屬性之後脫離了標準流的約束，而span"行內元素"（此時已經不是）是li的兒子。此時給其父親加上overflow:hidden後，就可以實現li被其兒子span"行內元素"給撐出高度了。

不加overflow:hidden時，

我們在瀏覽器中檢視效果可以發現：

ul大小為300px*2，li大小為300px*1，幾乎高度為0，而且虛線也顯示在了div的上邊緣處；

儘管父親作用幾乎為0，但是兒子們還是堅強的活了下來，文字是無法縮小到看不見的，它會以一種“孤獨”的形式顯示出來：span.title和span.date都還是有一定大小的。

這時，如果給父親加上overflow:hidden後，父親的高度就被子元素撐起來了。

此時跟直接設定父親元素的高度效果是一樣的，

也就是說，父親元素如果忘記設定高度了（或者說我們一般不設定高度以便自適應更多頁面情況），那麼它的高度幾乎為0，而它的兒子元素看起來就像被拋棄了一樣，失去了父親的保護（包含），如果給父親加上overflow:hidden，就可以避免這種現象的出現。

瀏覽器的相容性問題

講一下上述知識點涉及到的瀏覽器相容問題。

相容性1（微型盒子）

相容性的第一條：IE6不支援小於12px的盒子，任何小於12px的盒子，在IE6中看都大。即：IE 6不支援微型盒子。

舉個例子。我們設定一個height為 5px 、寬度為 200px的盒子，看下在IE 8和 IE 6中的顯示效果：

解決辦法很簡單，就是將盒子的字號大小，設定為小於盒子的高，比如，如果盒子的高為5px，那就把font-size設定為0px(0px < 5px)。如下：

height: 5px;
_font-size: 0px;

我們現在介紹一下瀏覽器hack。hack就是“黑客”，就是使用瀏覽器提供的後門，針對某一種瀏覽器做相容。

IE6留了一個後門：只要給css屬性之前，加上下劃線，這個屬性就是IE6的專有屬性。

比如說，我們給背景顏色這個屬性加上下劃線，就變成了_background-color: green;。效果如下：

於是乎，為了解決微型盒子（即height小於12px）的問題，正確寫法：（注意不要忘記下劃線）

height: 10px;
_font-size:0;

相容性2

**相容性的第二條：**IE6不支援用overflow:hidden;來清除浮動。

解決辦法，以毒攻毒。追加一條：

_zoom:1;

完整寫法：

overflow: hidden;
_zoom:1;

實際上，_zoom:1;能夠觸發瀏覽器hasLayout機制。這個機制，不要深究了，因為只有IE6有。我們只需要讓IE6好用，具體的實現機制，可以自行查閱。

需要強調的是，overflow:hidden;的本意，就是讓溢位盒子的border的內容隱藏，這個功能是IE6相容的。不相容的是overflow:hidden;清除浮動的時候。

總結：

我們剛才學習的兩個IE6的相容問題，都是通過多寫一條hack來解決的，這個我們稱為伴生屬性，即兩個屬性，要寫一起寫。

屬性1：

height:6px;
_font-size:0;

屬性2：

overflow:hidden;
_zoom:1;

順便提一下margin的一些注意點：

盒子居中margin:0 auto;

margin的值可以為auto，表示自動。當left、right兩個方向都是auto的時候，盒子居中了：

margin-left: auto;
margin-right: auto;

盒子居中的簡寫為：

margin:0 auto;

對上方程式碼的理解：上下的margin為0，左右的margin都儘可能的大，於是就居中了。

注意：

  • （1）只有標準流的盒子，才能使用margin:0 auto;居中。也就是說，當一個盒子浮動了、絕對定位了、固定定位了，都不能使用margin:0 auto;
  • （2）使用margin:0 auto;的盒子，必須有width，有明確的width。（可以這樣理解，如果沒有明確的witdh，那麼它的witdh就是霸佔整行，沒有意義）
  • （3）margin:0 auto;是讓盒子居中，不是讓盒子裡的文字居中。文字的居中，要使用text-align:center;

對上面的第三條總結一下：（非常重要）

margin:0 auto;    //讓這個div自己在大容器中的水平方向上居中。
text-align: center;  //讓這個div內部的文字居中。

順便普及一下知識，text-align還有：

text-align:left;     //沒啥用，因為預設居左
text-align:right;    //文字居右

 

善於使用父親的padding，而不是兒子的margin

我們來看一個奇怪的現象。現在有下面這樣一個結構：（div中放一個p）

	<div>
		<p></p>
	</div>

上面的結構中，我們嘗試通過給兒子p一個margin-top:50px;的屬性，讓其與父親保持50px的上邊距。結果卻看到了下面的奇怪的現象：

此時我們給父親div加一個border屬性，就正常了：

如果父親沒有border，那麼兒子的margin實際上踹的是“流”，踹的是這“行”。所以，父親整體也掉下來了。

margin這個屬性，本質上描述的是兄弟和兄弟之間的距離； 最好不要用這個marign表達父子之間的距離。

所以，如果要表達父子之間的距離，我們一定要善於使用父親的padding，而不是兒子的margin。

關於margin的IE6相容問題

IE6的雙倍margin的bug：

當出現連續浮動的元素，攜帶與浮動方向相同的margin時，隊首的元素，會雙倍marign。

	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>

解決方案：

（1）使浮動的方向和margin的方向，相反。

所以，你就會發現，我們特別喜歡，浮動的方向和margin的方向相反。並且，前端開發工程師，把這個當做習慣了。

	float: left;
	margin-right: 40px;

（2）使用hack：（沒必要，別慣著這個IE6）

單獨給隊首的元素，寫一個一半的margin：

<li class="no1"></li>

ul li.no1{
	_margin-left:20px;
}

PS：雙倍margin的問題，面試經常問哦。

IE6的3px bug

解決辦法：不用管，因為根本就不允許用兒子踹父親（即描述父子之間的距離，請用padding，而不是margin）。所以，如果你出現了3px bug，說明你的程式碼不標準。

IE6，千萬不要跟他死坑、較勁，它不配。 格調要高，我們講IE6的相容性問題，就是為了增加面試的成功率，不是為了成為IE6的專家。

Fireworks和others

Fireworks

fireworks是Adobe公司的一個設計軟體。功能非常多，我們以後用啥講啥。Fireworks的預設檔案格式是png。

標尺的快捷鍵：Ctrl + Alt+ R

others

首行縮排兩個漢字：

text-indent: 2em;

上方屬性中，單位比較奇怪，叫做em，em就是漢字的一個寬度。indent的意思是縮排。

 

相關文章