CSS中怎么利用float屬性控制div左右浮動(dòng)

本篇內(nèi)容介紹了“CSS中怎么利用float屬性控制div左右浮動(dòng)”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一、什么是浮動(dòng)？

浮動(dòng)，顧名思義，就是漂浮的意思。指的是一個(gè)元素脫離文檔流，懸浮在父元素之上的現(xiàn)象。

Css樣式的float浮動(dòng)屬性，用于設(shè)置標(biāo)簽對(duì)象（如：<div>標(biāo)簽盒子、<span>標(biāo)簽、<a>標(biāo)簽、<em>標(biāo)簽等html標(biāo)簽）的浮動(dòng)布局，浮動(dòng)也就是我們所說(shuō)標(biāo)簽對(duì)象浮動(dòng)居左靠左（float:left）和浮動(dòng)居右靠右(float:right)。

元素的水平方向浮動(dòng)，意味著元素只能左右移動(dòng)而不能上下移動(dòng)。

一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>

浮動(dòng)元素之后的元素將圍繞它。

浮動(dòng)元素之前的元素將不會(huì)受到影響。

如果圖像是右浮動(dòng)，下面的文本流將環(huán)繞在它左邊。

二、如何產(chǎn)生浮動(dòng)？

給元素本身添加float屬性

float值：

三、浮動(dòng)有什么作用？

作用：在html文檔流中，分為行元素、塊元素和行內(nèi)塊元素，

行元素和行內(nèi)塊元素都是以橫向排列的，而塊元素則是以流的形式從上往下排列的，當(dāng)我們想使塊元素橫向排列時(shí)，就用到了我們的浮動(dòng)(float)。

當(dāng)給一個(gè)塊級(jí)元素添加浮動(dòng)時(shí)本來(lái)應(yīng)該豎向排列的元素開始橫向排列的，如下圖所示：

.box {border: 1px solid #666;height: 700px;width: 700px;color: #fff;}
.box1 {float: left; width: 100px; height: 100px; background: #000;}
.box2 {float: left; width: 100px; height: 100px; background: red; }
.box3 {width: 200px; float: left; height: 200px; background: yellow; }
.box4 {width: 300px; float: left; height: 300px; background: blue; }
.box5 {float: left; width: 300px; height: 400px; background: green;}
<p class="box"> <p class="box1"> box1 </p> <p class="box2"> box2 </p> <p class="box3"> box3 </p> <p class="box4"> box4 </p> <p class="box5"> box5 </p> </p>

css+div浮動(dòng)其它應(yīng)用案例

DIV CSS實(shí)驗(yàn)一

Css樣式實(shí)例內(nèi)容，我們讓文字和圖片在一個(gè)固定寬度div層內(nèi)，讓藍(lán)色背景文字內(nèi)容居右，小圖片居左。

www.divcss5.com CSS案例演示最終效果圖如下

1、首先我們?cè)O(shè)置一個(gè)最外層的寬度為300px，高度為200px的css命名為box的css選擇器代碼如下（知識(shí)點(diǎn)px是什么意思）

.box{width:300px; height:200px;}

2、設(shè)置box內(nèi)的文字內(nèi)容部分css樣式命名為yangshi，并設(shè)置背景為藍(lán)色，寬度為120px，居右浮動(dòng)

.yangshi{ width:120px; float:right; background:#0066FF;}

3、設(shè)置圖片居左浮動(dòng)div+css樣式

img { float: left;}

4、body內(nèi)的div布局，代碼如下

 <div class="box">
<div class="yangshi">我是www.divcss5.com 網(wǎng)站，測(cè)試內(nèi)容</div>
<img src="demo.gif" />
</div>

說(shuō)明：這里img標(biāo)簽是鏈接外部圖片，圖片名為demo.gif

最終演示結(jié)果截圖

CSS實(shí)驗(yàn)二

接下來(lái)我們演示使用div+css讓這里小圖片居右（上個(gè)例子是居左），藍(lán)色背景文字內(nèi)容區(qū)居左（上個(gè)例子是居右）(擴(kuò)展css 居中)。這里我們只需要改變yangshi的float:right;為float:left和圖片css樣式img { float: left;}為img { float: right;}

CSS代碼如下：

 .box{width:300px; height:200px;}
.yangshi{ width:120px; float:right; background:#0066FF;}
img{ float:left;}

html中的css代碼和內(nèi)容不變

最終演示結(jié)果截圖如下：

希望通過(guò)以上兩個(gè)css實(shí)例對(duì)你認(rèn)識(shí)float有幫助。希望大家多少實(shí)際操作實(shí)踐試試！

css浮動(dòng)總結(jié)

我們要區(qū)別與文字內(nèi)容靠左( text-align:left)靠右( text-align:right)樣式，浮動(dòng)只針對(duì)html標(biāo)簽設(shè)置靠左靠右浮動(dòng)樣式。float浮動(dòng)樣式?jīng)]有靠中（浮動(dòng)居中）的樣式，如果需要讓標(biāo)簽對(duì)象居中我們?cè)赾ss布局居中相關(guān)文字給大家詳細(xì)講解介紹（css margin）。這里記住浮動(dòng)靠右使用float:right，浮動(dòng)靠左使用float:left樣式即可。

“CSS中怎么利用float屬性控制div左右浮動(dòng)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！