使用float浮動(dòng)布局的方法-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)使用float浮動(dòng)布局的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司成立與2013年，先為靜安等服務(wù)建站，靜安等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為靜安企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

                                                         使用float（浮動(dòng)）可以如何布局？本篇文章就給大家介紹利用float（浮動(dòng)）來(lái)如何布局內(nèi)容。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。

在之前的文章【float是什么？float屬性詳解】中介紹了float屬性是什么，為什么要有浮動(dòng)等等知識(shí)，大家感興趣的，可以參考一下。下面我們通過(guò)浮動(dòng)布局的示例，來(lái)看看float來(lái)如何布局內(nèi)容。

1、使用float來(lái)實(shí)現(xiàn)內(nèi)容環(huán)繞

html代碼：

<div class="demo">
	<h2>浮動(dòng)--文字環(huán)繞</h2>
	<div class="box_left">向左浮動(dòng)</div>
	<p>此文本位于浮動(dòng)盒子（.box_left）之后的正常段落中。該段可以看作是淺綠色的盒子。請(qǐng)注意，此輪廓延伸 到浮動(dòng)div的 后面。這很重要，因?yàn)檫@意味著段落的左側(cè)實(shí)際上位于頁(yè)面的左側(cè)。只是該段落的內(nèi)容已經(jīng)向右移動(dòng)，以“繞過(guò)”浮動(dòng)的DIV。如果你試圖操縱與浮點(diǎn)相鄰的段落一側(cè)的邊距或 填充，則會(huì)產(chǎn)生影響。</p>
	<div class="box_right">向右浮動(dòng)</div>
	<p>現(xiàn)在我們添加第二段并用內(nèi)容充實(shí)它。你應(yīng)該看到，一旦覆蓋了div的高度，此段落文本將環(huán)繞它，以便文本不再縮進(jìn)。類(lèi)似的效果可在html通過(guò)設(shè)置來(lái)實(shí)現(xiàn)。</p>
	<p>float屬性的一個(gè)復(fù)雜因素是Internet Explorer將在浮動(dòng)的div盒子和后面的文本之間添加一些填充像素。這在標(biāo)準(zhǔn)中沒(méi)有位置，只是他們“弱化”CSS和HTML的方式。在其他瀏覽器中，段落文本將與浮動(dòng)的DIV對(duì)接。如果要在所有瀏覽器中填充，則需要為浮動(dòng)元素指定邊距。</p>
</div>

css代碼：

.demo {
	width: 520px;
	overflow: hidden;
	border: 2px solid paleturquoise;
	padding: 10px;
	margin: 100px auto;
}

.box_left {
	float: left;
	margin-right: 15px;
	width: 150px;
	height: 100px;
	border-radius: 5px;
	background-color: rgb(207, 232, 220);
	padding: 1em;
}

.box_right {
	float: right;
	margin-left: 15px;
	width: 150px;
	height: 100px;
	border-radius: 5px;
	background-color: rgb(207, 232, 220);
	padding: 1em;
}

效果圖：

2、使用'clear'強(qiáng)制內(nèi)容通過(guò)浮動(dòng)

使用float布局內(nèi)容時(shí)常見(jiàn)的錯(cuò)誤是忘記添加清除。這是對(duì)浮動(dòng)內(nèi)容之后的元素的指令，讓元素向下移動(dòng)足夠遠(yuǎn)的距離，使其不受前面浮動(dòng)內(nèi)容的影響。

當(dāng)float元素后面的“正?！眱?nèi)容不足以清除它時(shí)，就會(huì)出現(xiàn)元素上移的問(wèn)題。

在這種情況下，你可能會(huì)看到后續(xù)部分的標(biāo)題生效，甚至內(nèi)容溢出頁(yè)面的“內(nèi)容”部分。這是因?yàn)楦?dòng)的內(nèi)容被“從文檔流中取出”，因此不會(huì)強(qiáng)制任何包含框在頁(yè)面上向下擴(kuò)展。

當(dāng)沒(méi)有其他元素存在時(shí)，強(qiáng)制容器在浮動(dòng)內(nèi)容周?chē)归_(kāi)的最佳方法是插入一個(gè)空的div，其中clear設(shè)置為'both'，如下所示：

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

我們把上例修改一下：

<div class="demo">
	<h2>浮動(dòng)--文字環(huán)繞</h2>
	<div class="box_left">向左浮動(dòng)</div>
	<p>此文本位于浮動(dòng)盒子（.box_left）之后的正常段落中。該段可以看作是淺綠色的盒子。請(qǐng)注意，此輪廓延伸 到浮動(dòng)div的 后面。這很重要，因?yàn)檫@意味著段落的左側(cè)實(shí)際上位于頁(yè)面的左側(cè)。只是該段落的內(nèi)容已經(jīng)向右移動(dòng)，以“繞過(guò)”浮動(dòng)的DIV。如果你試圖操縱與浮點(diǎn)相鄰的段落一側(cè)的邊距或 填充，則會(huì)產(chǎn)生影響。</p>
	<div class="box_right">向右浮動(dòng)</div>
	<p>現(xiàn)在我們添加第二段并用內(nèi)容充實(shí)它。你應(yīng)該看到，一旦覆蓋了div的高度，此段落文本將環(huán)繞它，以便文本不再縮進(jìn)。類(lèi)似的效果可在html通過(guò)設(shè)置來(lái)實(shí)現(xiàn)。</p>
	<div style="clear: both;"></div>
	<p>float屬性的一個(gè)復(fù)雜因素是Internet Explorer將在浮動(dòng)的div盒子和后面的文本之間添加一些填充像素。這在標(biāo)準(zhǔn)中沒(méi)有位置，只是他們“弱化”CSS和HTML的方式。在其他瀏覽器中，段落文本將與浮動(dòng)的DIV對(duì)接。如果要在所有瀏覽器中填充，則需要為浮動(dòng)元素指定邊距。</p>
</div>

效果圖：

3、使用浮動(dòng)將內(nèi)容分成列

html代碼：

<div class="demo">
	<div class="box_1">
		<p>第一列</p>
		<p>float的一個(gè)稍微不常見(jiàn)屬性但有非常強(qiáng)大的用途，可以將內(nèi)容分組為列。這可以通過(guò)將div向左浮動(dòng)以形成左側(cè)列，然后添加第二個(gè)div來(lái)完成，同時(shí)向左浮動(dòng)以位于其旁邊。每個(gè)DIV必須具有寬度，你可以向第一個(gè)DIV添加右邊距以分隔列。在許多情況下，這使得TABLE元素的使用變得不必要。</p>
	</div>

	<div class="box_2">
		<p>第一列</p>
		<div style="width: 100px;height: 50px;border: 1px solid #000;"></div>
		<p>你可以看到此框中的內(nèi)容與第一個(gè)段落相鄰，并且與第一個(gè)示例不同，一旦清除了第一個(gè)浮點(diǎn)的高度，它就不會(huì)回繞。</p>
	</div>
	<div>使用這種布局，你必須記住在最后一個(gè)DIV之后添加一個(gè)清除，否則后續(xù)內(nèi)容可以出現(xiàn)在兩列中和周?chē)?lt;/div>
</div>

css代碼：

.demo {
	width: 800px;
	overflow: hidden;
	border: 2px solid paleturquoise;
	padding: 10px;
	margin: 100px auto;
}

.box_1 {
	float: left;
	margin-right: 15px;
	width: 200px;
	height: 310px;
	border-radius: 5px;
	background-color: rgb(207, 232, 220);
	padding: 1em;
}

.box_2 {
	float: left;
	margin-left: 15px;
	width: 200px;
	height: 310px;
	border-radius: 5px;
	background-color: rgb(207, 232, 220);
	padding: 1em;
}

效果圖：

你也可以不僅限于設(shè)置兩列浮動(dòng)，并且可以很容易地在頁(yè)面上有三個(gè)或四個(gè)。還有其他選擇。對(duì)于三列布局，你可以向左和向右浮動(dòng)div并在其間顯示“正?！眱?nèi)容。

4、使用浮動(dòng)“平鋪”圖像和文本

現(xiàn)在我們來(lái)看一些應(yīng)該簡(jiǎn)單但實(shí)際上非常復(fù)雜的東西。如果你有很多小DIV - 例如照片庫(kù)中的照片 - 你只需將它們?nèi)扛?dòng)到一側(cè)就可以創(chuàng)建一個(gè)簡(jiǎn)單的頁(yè)面。

當(dāng)要浮動(dòng)的物品都具有相同的高度時(shí)，這非常有效：

但是當(dāng)高度不同時(shí)就會(huì)出現(xiàn)很多問(wèn)題，因?yàn)椤拜^高”的物品會(huì)阻止那些隨后漂浮到左側(cè)的物品：

注意：重新加載此頁(yè)面以查看其他配置。

如果是這種情況，那么最安全的選擇是使用table表格進(jìn)行布局。在某些情況下，您可以通過(guò)向每個(gè)第n個(gè)元素插入clear =“l(fā)eft”來(lái)避免這種情況 ，但是在添加或刪除項(xiàng)目時(shí)可能難以維護(hù)。

關(guān)于使用float浮動(dòng)布局的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章名稱(chēng)：使用float浮動(dòng)布局的方法-創(chuàng)新互聯(lián)
瀏覽地址：http://www.muchs.cn/article44/cdjjhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、全網(wǎng)營(yíng)銷(xiāo)推廣、域名注冊(cè)、面包屑導(dǎo)航、App開(kāi)發(fā)、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)