資訊專欄INFORMATION COLUMN
摘要：浮動在我看來浮動元素都是脫離了軀殼的靈魂，有其神而無其形沒有高度，他們存在于世間，但世人卻無法看見他們脫離文檔流，塊級元素可占據(jù)他們的位置，但是風(fēng)雨等大自然因素卻可以洞察到他們的存在，從而環(huán)繞其周圍不脫離文本流，內(nèi)聯(lián)元素可環(huán)繞在其周圍。
浮動
在我看來浮動元素都是脫離了軀殼的靈魂，有其神而無其形(沒有高度)，他們存在于世間，但世人卻無法看見他們（脫離文檔流，塊級元素可占據(jù)他們的位置），但是風(fēng)雨等大自然因素卻可以洞察到他們的存在，從而環(huán)繞其周圍（不脫離文本流，內(nèi)聯(lián)元素可環(huán)繞在其周圍）。
浮動元素的外邊距不會合并
浮動非替換元素時必須設(shè)定寬度
浮動元素會脫離文檔流但不會脫離文本流，因而會造成文本環(huán)繞效果，而這也是浮動的本意。
不管是塊級元素還是內(nèi)聯(lián)元素，一旦浮動就會變成行內(nèi)塊元素（即display: inline-block;）
如果浮動元素應(yīng)用了負(fù)外邊距而導(dǎo)致其與相鄰元素重疊，分兩種情況：
行內(nèi)框與一個浮動元素重疊時，其邊框、背景和內(nèi)容都在該浮動元素之上顯示
塊框與一個浮動元素重疊時，其邊框和背景都在該浮動元素之下顯示，而內(nèi)容在浮動元素之上顯示
清除浮動浮動父元素上面提到過浮動元素是不具備高度的，因此會造成父元素高度塌陷，可以通過以下方法來清除浮動。不僅要知道什么方式可以清除浮動，更要知道這些方法是如何清除浮動的。
CSS 2.1中提到了浮動的一個特性：浮動元素會延伸，從而包含其所有后代元素。但這有點(diǎn)拆了東墻補(bǔ)西墻的意味，不推薦。
應(yīng)用對象：父元素
overflow 屬性本意是規(guī)定了當(dāng)內(nèi)容溢出元素框時發(fā)生的事情。但當(dāng)其屬性值為hidden或auto時，它會自動的清理包含的任何浮動元素，也就意味著它是認(rèn)可浮動元素的高度的。但在某些情況下，使用該方法會產(chǎn)生滾動條或截?cái)鄡?nèi)容。所以使用時需謹(jǐn)慎。
應(yīng)用對象：父元素
clear屬性會給該元素添加足夠的外邊距，從而達(dá)到清除浮動的效果。clear 屬性的值可以是：left、right、both或none。
應(yīng)用對象：相鄰元素
在沒有現(xiàn)成元素可以應(yīng)用clear屬性時，我們可以使用偽元素：
.clearfix::after {
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
注：after 會在元素內(nèi)容后面而不是元素后面插入一個偽元素。
應(yīng)用對象：父元素
當(dāng)然，我們也可以直接在浮動元素后面添加一個空元素，如下：
同樣可以達(dá)到清除浮動的效果，但會增加不必要的代碼，不推薦。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/111594.html
css浮動現(xiàn)象及清除浮動的方法 ? 首先先明確浮動最初的定義及使用場景：實(shí)現(xiàn)文本環(huán)繞圖片的效果。 除了用浮動外，目前暫無其他方法實(shí)現(xiàn)文本環(huán)繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動的具體定義： 浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不...
css浮動現(xiàn)象及清除浮動的方法 ? 首先先明確浮動最初的定義及使用場景：實(shí)現(xiàn)文本環(huán)繞圖片的效果。 除了用浮動外，目前暫無其他方法實(shí)現(xiàn)文本環(huán)繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動的具體定義： 浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不...
摘要：清除浮動并不是說讓浮動元素回到文檔流清除浮動只會改變改元素自身的位置，并且只針對排在該元素前面的元素。 我在做頁面布局的時候，多多少少總會受到來自浮動的困擾，因此專門通過實(shí)踐來總結(jié)一下浮動與清除浮動。 首先總結(jié)幾個基礎(chǔ)的概念： 浮動：設(shè)置浮動的元素會脫離文檔流，不會影響塊元素的布局，但是會影響內(nèi)聯(lián)元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會單個元素獨(dú)占一行 接下來我們通過實(shí)...
摘要：清除浮動并不是說讓浮動元素回到文檔流清除浮動只會改變改元素自身的位置，并且只針對排在該元素前面的元素。 我在做頁面布局的時候，多多少少總會受到來自浮動的困擾，因此專門通過實(shí)踐來總結(jié)一下浮動與清除浮動。 首先總結(jié)幾個基礎(chǔ)的概念： 浮動：設(shè)置浮動的元素會脫離文檔流，不會影響塊元素的布局，但是會影響內(nèi)聯(lián)元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會單個元素獨(dú)占一行 接下來我們通過實(shí)...
閱讀 2672·2021-11-25 09:43
閱讀 1922·2021-09-22 15:26
閱讀 3953·2019-08-30 15:56
閱讀 1788·2019-08-30 15:55
閱讀 1957·2019-08-30 15:54
閱讀 873·2019-08-30 15:52
閱讀 3230·2019-08-29 16:23
閱讀 966·2019-08-29 12:43
