CSS浮動佈局詳解

CSS浮動是什麼

CSS中浮動屬性(float)設計的初衷是爲了解決頁面展現樣式時須要文字環繞圖片的場景；相似於Word中的文字環繞屬性，基礎使用場景以下:

浮動前:

浮動後:

代碼實現以下(簡化版)

<style>
 img{
		float:left;
 }  
</style>
<div>
	<img src="xxx.jpg" alt="test">
	<p>xxx</p>
</div>
複製代碼

浮動帶來的問題--高度塌陷

因爲設置了float後元素脫離了標準流，從而致使了高度的塌陷，這裏有一個很直觀的例子

浮動前

浮動後

高度塌陷帶來的問題

當出現高度塌陷後本來想放在下面的元素會自動向上補充，出現這種結果

演示代碼

<style type="text/css">
	.div1{
		height:100px;
		width:100px;
		background:blue;
		float:left;
	}
	.div2{
		height:10px;
		width:300px;
		background:red;
	}
</style>
<main>
	<div class="div1"></div>
	<p>這裏是一個段落</p>
</main>
<div class="div2"></div>
複製代碼

如何解決塌陷--清除浮動

清除浮動主流方法有兩種:1）使用clear屬性清除浮動；2）新建BFC

利用clear屬性

方式一：在設置float的兄弟元素最後設置一個元素，對其設置clear屬性，以下

<style type="text/css">
	.div1{
		height:100px;
		width:100px;
		background:blue;
		float:left;
	}
	.div2{
		height:10px;
		width:300px;
		background:red;
	}
	.clearfix{
		clear:both;
	}
</style>
<main>
	<div class="div1"></div>
	<p>這裏是一個段落</p>
	<table class="clearfix"></table>
</main>
<div class="div2"></div>
複製代碼

方式二： 方式一的缺點仍是很明顯的，就是無緣無故的新增了一個沒有內容的元素，使頁面出現冗餘；這裏能夠利用僞元素來達到一樣的效果

main::after{
		content:"";
		display:table;
		clear:both;
	}
複製代碼

清除浮動後的效果

新建BFC

該方法的原理是：父元素在新建一個 BFC 時，其高度計算時會把浮動子元素的包進來。那麼如何新建一個BFC呢

根元素或其它包含它的元素 浮動 (元素的 float 不是 none) 絕對定位的元素 (元素具備 position 爲 absolute 或 fixed) 內聯塊 inline-blocks (元素具備 display: inline-block) 表格單元格 (元素具備 display: table-cell，HTML表格單元格默認屬性) 表格標題 (元素具備 display: table-caption, HTML表格標題默認屬性) 塊元素具備overflow ，且值不是 visible display: flow-root 雖然有這麼多方法可用，可咱們經常使用的就是 overflow: hidden

main{
		overflow:hidden;
	}
複製代碼

也能夠達到清除浮動的效果

float在佈局中的使用

float元素設計的初衷雖然是文字環繞圖片,可是目前其最普遍的應用倒是在佈局領域，下面除了介紹如何應用在佈局外，還會介紹幾種常見的float佈局方式，下面給出了最簡單的流式佈局樣式

1.傳統流式佈局

每一個div默認佔據一行，不論寬度都會佔滿此行；float佈局的核心思想就是怎麼把這些一行一行的數據給他以美觀的方式呈現出來

代碼演示

<div class="div1" style="background-color:red;height:100px;width:350px">
	div1
</div>
<div class="div2" style="background-color:blue;height:120px;width:200px">
	div2
</div>
<div class="div3" style="background-color:green;height:140px;width:50px">
	div3
</div>
<div class="div4" style="background-color:yellow;height:100px;width:600px">
	div4
</div>
複製代碼

2.咱們將div2設置爲懸浮後會發生什麼

爲何會出現這種狀況呢?div3莫名其妙的變短了? 其實並非div3變短了，而是div2設置浮動後脫離了頁面的流，懸浮在了其餘元素的上面，而div2脫離後div3天然的向上補充，帶着div4總體上移，又被div2擋住了一部分因此出現了上圖中的狀況，對比看一下div2右浮動就比較清晰了

3.再將div3懸浮後會發生什麼

同理，這裏div2 div3脫離標準流並懸浮其上,組成了一個新的層次；div4直接上移，部分被di2和div3所遮擋

4.基礎原理大概介紹完畢，那麼如何利用float將上面的代碼構造出美觀的效果呢

代碼示例(爲了美觀作了部分調整，關注重點便可)

<style>
	.div1,.div2,.div3{
		float:left;
		margin:0 10px;
	}
	.div4{margin:10 10px;}
	.clear-fix::after {
			content: "";
			display: table;
			clear: both;
		}
</style>
<main class="clear-fix">
<div class="div2" style="background-color:blue;height:120px;width:100px;">
	div2
</div>
<div class="div1" style="background-color:red;height:100px;width:350px;">
	div1
</div>
<div class="div3" style="background-color:green;height:140px;width:50px;">
	div3
</div>
</main>
<div class="div4" style="background-color:yellow;height:30px;width:540px">
	div4
</div>
複製代碼

最終樣式以下，是網頁中很是常見的三列布局方式

這裏介紹了CSS浮動的基本知識，因爲篇幅緣由有些比較基礎細緻的知識沒有包含，你們感興趣能夠本身學習下!

下面一篇博客會有具體的例子供你們參考，有須要的能夠看下