CSS——知識(shí)點(diǎn)補(bǔ)充（四）元素的浮動(dòng)屬性

通過浮動(dòng)可以使一個(gè)元素向其父元素的左側(cè)或右側(cè)移動(dòng)，我們使用float屬性來設(shè)置于元素的浮動(dòng)

創(chuàng)新互聯(lián)專注于沈北新網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供沈北新營(yíng)銷型網(wǎng)站建設(shè)，沈北新網(wǎng)站制作、沈北新網(wǎng)頁(yè)設(shè)計(jì)、沈北新網(wǎng)站官網(wǎng)定制、微信小程序服務(wù)，打造沈北新網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供沈北新網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

注意,元素設(shè)置浮動(dòng)以后，水平布局的等式便不需要強(qiáng)制成立 。元素設(shè)置浮動(dòng)以后，會(huì)完全從文檔流中脫離，不再占用文檔流的位置，所以元素下邊的還在文檔流中的元素會(huì)自動(dòng)向上移動(dòng)

（2）設(shè)置浮動(dòng)以后元素會(huì)向父元素的左側(cè)或右側(cè)移動(dòng)，

（3）浮動(dòng)元素默認(rèn)不會(huì)從父元素中移出

（4）浮動(dòng)元素向左或向右移動(dòng)時(shí),不會(huì)超過它前邊的其他浮動(dòng)元素

（5）如果浮動(dòng)元素的上邊是一個(gè)沒有浮動(dòng)的塊元素，則浮動(dòng)元素?zé)o法上移

（6）浮動(dòng)元素不會(huì)超過它上邊的浮動(dòng)的兄弟元素，最多最多就是和它一樣高

實(shí)際上，浮動(dòng)屬性一開始創(chuàng)建出來的原因就是為了實(shí)現(xiàn)文字環(huán)繞的效果的，只是后來大家發(fā)現(xiàn)利用浮動(dòng)可以很好地處理頁(yè)面布局的問題，所以現(xiàn)在更多時(shí)候是利用它來做布局的功能。。。

我們知道，塊元素和行內(nèi)元素在文檔流中都有著各自的布局特點(diǎn)，比如塊元素獨(dú)占一行等。那么如果脫離了文檔流，塊元素和行內(nèi)元素分別會(huì)有什么樣的影響呢？

1、塊元素不在獨(dú)占頁(yè)面的一行

2、脫離文檔流以后，塊元素的寬度和高度默認(rèn)都被內(nèi)容撐開

1、行內(nèi)元素脫高文檔流以后會(huì)變成塊元素，特點(diǎn)和塊元素一樣

也就是說，一旦脫離文檔流以后，我們就不需要再區(qū)分塊和行內(nèi)了。

我們可以看一下下面的案例，在沒有使用 clear 屬性前，對(duì)于兩個(gè)兄弟元素，如果前者設(shè)置為浮動(dòng)，那么由于其脫離了文檔流，那么后者就會(huì)移動(dòng)到前者原先的位置上。如果我們不想元素受到其他元素的浮動(dòng)影響，那么就可以通過設(shè)置 clear 屬性來解決這個(gè)問題。

clear底層實(shí)現(xiàn)的原理是：設(shè)置清除浮動(dòng)以后，瀏覽器會(huì)自動(dòng)為元素添加一個(gè)margin，以使其位置不受其他元素的影響

我們可以看下面這個(gè)案例，父 div 元素中包含著一個(gè)設(shè)置為浮動(dòng)的 div 子元素，由于子元素設(shè)置為浮動(dòng)，脫離了文檔流，且父元素中沒有指定高度，所以此時(shí)一旦子元素脫離了文檔流后，就缺少了支撐起父元素高度的元素。相比于這樣的效果，我們更希望即使子元素設(shè)置為浮動(dòng)，但父元素依然可以包裹住子元素（或者說是有著子元素的高度，不至于塌陷）。

BFC(Block Formatting Context)塊級(jí)格式化環(huán)境

BFC是一個(gè)css中的一個(gè)隱含的屬性， 當(dāng)元素開啟BFC后，該元素會(huì)變成一個(gè)獨(dú)立的布局區(qū)域 ?？梢岳斫鉃?，此時(shí)元素內(nèi)的后代元素不會(huì)再把其他樣式傳遞到外面了。

元素開啟BFC后的特點(diǎn);

1.開啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋

2.開啟BFC的元素子元素和父元素外邊距不會(huì)重疊

3.開啟BFC的元素可以包含浮動(dòng)的子元素

可以通過一些特殊方式來開啟元素的BFC

1、設(shè)置元素的浮動(dòng)（不推薦)

2、將元素設(shè)置為行內(nèi)塊元素(不推薦)

需要注意的是，雖然開啟元素的BFC環(huán)境可以解決高度塌陷的問題，但是這還不是最完美的解決方案，在某些特殊的環(huán)境下還是會(huì)有問題。

我們回顧一下，高度塌陷產(chǎn)生的原因是什么？主要是因?yàn)楦冈貨]有設(shè)置高度，所以父元素的高度由子元素的高度決定，一旦子元素設(shè)置為浮動(dòng)后脫離了文檔流，那么此時(shí)父元素就會(huì)由于沒有子元素的支撐而塌陷。

那么如果我們能夠?qū)崿F(xiàn)，手動(dòng)在浮動(dòng)的子元素后面放入一個(gè)無內(nèi)容的塊元素，且清除其受到的 float 影響，那么此時(shí)這個(gè)塊元素就會(huì)落在浮動(dòng)的元素下方，又由于（自身沒有設(shè)置高度的）父元素的高度由子元素的高度決定，所以此時(shí)父元素因?yàn)橐略龅臒o內(nèi)容塊元素，也就自然可以包裹浮動(dòng)的元素了。

所謂的clearfix樣式，其實(shí)核心就是在第二種解決方式的基礎(chǔ)上，對(duì)樣式做一個(gè)進(jìn)一步的封裝，使其既可以解決高度塌陷的問題，還可以解決父子元素外邊距重疊的問題。

關(guān)于css浮動(dòng)覆蓋的問題

html元素有幾個(gè)是塊級(jí)元素如p,h1-h6等，這些元素自帶display block屬性，元素間相當(dāng)于會(huì)有一個(gè)換行符不能同排排列，除非定義浮動(dòng)。而img是內(nèi)聯(lián)塊元素也就是display inline-bloack，可以并排顯示的。 兩個(gè)元素一個(gè)加了浮動(dòng)一個(gè)沒加浮動(dòng)，只會(huì)是浮動(dòng)的優(yōu)先排列在左或者右，也就是沒有浮動(dòng)的元素會(huì)被有浮動(dòng)的拆隊(duì)。除非2個(gè)元素都是浮動(dòng)的他們才會(huì)老老實(shí)實(shí)的按順序排在一起。浮動(dòng)不是覆蓋只是位置的先后罷了，便于將不同類型的元素并排。css里沒有覆蓋之說。你寫的例子最終效果就是b圖排在a圖左邊而已。

css 中設(shè)置了float: left之后為什么會(huì)覆蓋住其他元素? 明明是向左浮動(dòng)的 為什么會(huì)把第二個(gè)元素蓋住?

浮動(dòng)，你可以理解為漂浮在空中，然后它后面緊挨著但未設(shè)置浮動(dòng)的元素則仍然在地上，并且填補(bǔ)了漂浮元素原來在地上所占用的位置，也就是說，非浮動(dòng)元素“鉆”到浮動(dòng)元素的下面去了，所以被蓋住了。

要想避免這種情況，必須讓浮動(dòng)元素清除浮動(dòng)，最簡(jiǎn)單的方式就是給淺藍(lán)色div加一個(gè) overflow:hidden ，這樣它在空中漂浮的同時(shí)也保留了它原來在地面占用的位置，這樣后面的其他非浮動(dòng)元素就不會(huì)移動(dòng)位置了，也就不會(huì)被遮蓋。

css如何清除浮動(dòng)？

css清除浮動(dòng)可以理解為打破橫向排列。 清除浮動(dòng)的關(guān)鍵字是clear，官方定義如下： 語(yǔ)法： clear : none | left | right | both 取值： none : 默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象 left : 不允許左邊有浮動(dòng)對(duì)象 right : 不允許右邊有浮動(dòng)對(duì)象 both : 不允許有浮動(dòng)對(duì)象 根據(jù)上邊的基礎(chǔ)，假如頁(yè)面中只有兩個(gè)元素div1、div2，它們都是左浮動(dòng)，場(chǎng)景如下：此時(shí)div1、div2都浮動(dòng)，根據(jù)規(guī)則，div2會(huì)跟隨在div1后邊，但仍然希望div2能排列在div1下邊，就像div1沒有浮動(dòng)，div2左浮動(dòng)那樣。這時(shí)候就要用到清除浮動(dòng)（clear）對(duì)于CSS的清除浮動(dòng)(clear)，一定要牢記：這個(gè)規(guī)則只能影響使用清除的元素本身，不能影響其他元素。具體做法：要想讓div2下移，就必須在div2的CSS樣式中使用浮動(dòng)。本例中div2的左邊有浮動(dòng)元素div1，因此只要在div2的CSS樣式中使用clear:left;來指定div2元素左邊不允許出現(xiàn)浮動(dòng)元素，這樣div2就被迫下移一行。

CSS浮動(dòng)后為什么下面的DIV覆蓋掉上面的浮動(dòng)

你百度 css clear 我的reset.css是從百度以前的版本中整理出來的 用的是clearfix這個(gè)很好用，不用增加多的節(jié)點(diǎn)，但在ie 6、7中如果你的切版不標(biāo)準(zhǔn)就容易錯(cuò)位。position:absolute是絕對(duì)定位，默認(rèn)就會(huì)比普通節(jié)點(diǎn)高一位。用絕對(duì)與相對(duì)定位來做頁(yè)面要不就是高手，要不就是超級(jí)新手，相對(duì)絕對(duì)定位很難控制，如果你css根底不強(qiáng)，基本頁(yè)面上的樣式是爛到想死的。

CSS 浮動(dòng) 覆蓋問題

你是怎么理解“浮動(dòng)”這兩字的？所謂浮動(dòng)，就是浮在其它物體的上面，既然是在上面，那么下面的物體就被覆蓋看不見啦。

這里的“消失”，是指在視界中消失，也就是看不見了，并不是說不存在了。