CSS同級(jí)元素浮動(dòng)怎么實(shí)現(xiàn)

本篇內(nèi)容主要講解“CSS同級(jí)元素浮動(dòng)怎么實(shí)現(xiàn)”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“CSS同級(jí)元素浮動(dòng)怎么實(shí)現(xiàn)”吧!

1.同級(jí)浮動(dòng)

（1）使塊級(jí)元素在同一行顯示（所有要在同一行顯示的都要加浮動(dòng)）

<div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div>.box1{
	border: 2px solid red;
	width: 40px;
	height:100px;
	float:left;
}
.box2{
	border: 6px solid black;
	width:100px;
	height:40px;
	float:left;
}
.box3{
	border: 12px solid blue;
	width:100px;
	height:300px;
	float:left;
}	

（2）使行內(nèi)元素支持寬和高

<span class="box1"></span>.box1{
	border: 2px solid red;
	width: 40px;
	height:100px;
	float:left;
}

3.不設(shè)寬或高時(shí)，寬和高由內(nèi)容撐開；

<span class="box1">hello</span>
.box1{
	border: 2px solid red;	float:left;
}

4.如果在某個(gè)元素上添加浮動(dòng)，它將脫離標(biāo)準(zhǔn)文檔流（文檔流是指對(duì)象在文檔所占的位置），并且向后找沒有浮動(dòng)的元素覆蓋在上面（向后浮動(dòng)），跟前面的元素沒有關(guān)系。

<div class="box1"></div><div class="box2"></div><div class="box3"></div>.box1{	border: 1px solid red;
	width: 40px;
	height:100px;
	float：left;
}
.box2{	border: 4px solid blue;
	width: 140px;
	height:40px;
	float:left;
}
.box3{	border: 8px solid gray;
	width: 200px;
	height:200px;
	
}

5.如果某個(gè)元素加了浮動(dòng)，它先脫離標(biāo)準(zhǔn)流，在根據(jù)浮動(dòng)方向浮動(dòng)，直到碰到上一浮動(dòng)元素的邊界停下來(lái)，或者因?yàn)樯弦粚硬荒芊畔略撛囟粝聛?lái)，在下一行；

		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>.box1{	border: 11px solid red;
	width: 40px;
	height:100px;
	float:right;
	
}
.box2{	border: 4px solid blue;
	width: 140px;
	height:40px;
	float:left;
	
}
.box3{	border: 8px solid gray;
	width: 200px;
	height:200px;
}

6.當(dāng)一個(gè)元素A浮動(dòng)在一個(gè)沒有浮動(dòng)的元素B上，他會(huì)擠掉B的內(nèi)容原來(lái)的位置，甚至擠出

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
.box1{
	border: 11px solid red;
	width: 40px;
	height:100px;
	
	
}
.box2{
	border: 4px solid blue;
	width: 60px;
	height:100px;	float:left;
	
}
.box3{
	border: 8px solid gray;
	width: 200px;
	height:200px;
}

分析時(shí)注意如果某一個(gè)元素浮動(dòng)，只 看它前面的一個(gè)元素  ，前一個(gè)元素也浮動(dòng)，則并排顯示，如果前一個(gè)元素沒有浮動(dòng)，則相對(duì)位置不變

到此，相信大家對(duì)“CSS同級(jí)元素浮動(dòng)怎么實(shí)現(xiàn)”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！