浮動(dòng)

yck 發(fā)布于2019-08-01 17:04 / 2951人閱讀

摘要：浮動(dòng)會(huì)導(dǎo)致父元素高度坍塌示例代碼效果如上圖所示，浮動(dòng)元素脫離了文檔流，并不占據(jù)文檔流的位置，自然父元素也就不能被撐開，所以沒了高度，導(dǎo)致父元素高度坍塌。

最近在學(xué)浮動(dòng)的知識(shí)，下面總結(jié)了一些浮動(dòng)的一些特征

1. 塊級(jí)元素浮動(dòng)將并排顯示，不再獨(dú)占一行

示例代碼：




    
    
    
    Document

效果：

修改：

修改效果：

2. 內(nèi)聯(lián)樣式浮動(dòng)就可以設(shè)置寬高，不僅能夠支持margin-left(right)，而且也支持margin-top(bottom)

示例代碼：




    
    
    
    Document

效果：

修改：

修改效果：

3. 浮動(dòng)元素脫離正常的文檔流,普通元素會(huì)占據(jù)浮動(dòng)元素的位置

從上圖可以看出，默認(rèn)三個(gè)設(shè)置了寬高的block元素，本來(lái)會(huì)格子獨(dú)占一行；如果框1設(shè)置了向左/向右浮動(dòng)，他會(huì)忽略框2和框3，直到碰到父元素；同時(shí)也存在蓋住普通元素的風(fēng)險(xiǎn)。

4. 浮動(dòng)會(huì)導(dǎo)致父元素高度坍塌

示例代碼：




    
    
    
    Document

效果：

如上圖所示，浮動(dòng)元素脫離了文檔流，并不占據(jù)文檔流的位置，自然父元素也就不能被撐開，所以沒了高度，導(dǎo)致父元素高度坍塌。

浮動(dòng)元素對(duì)父元素的影響

對(duì)父容器若子元素都是浮動(dòng)元素，則無(wú)法撐開父元素高度，父元素失去高度。

浮動(dòng)元素其他浮動(dòng)元素的影響

對(duì)其他浮動(dòng)元素，如果包含塊太窄，無(wú)法完全水平容納浮動(dòng)元素，那么其他浮動(dòng)元素就會(huì)向下移動(dòng)，直到有足夠空間。如果浮動(dòng)元素高度不同，那么向下移動(dòng)時(shí)可能會(huì)被卡住。

示例代碼1（塊太窄，向下移動(dòng)）：

效果：

示例代碼2（卡?。?

效果：

浮動(dòng)元素對(duì)普通元素的影響

普通元素會(huì)表現(xiàn)得當(dāng)作浮動(dòng)元素不存在一樣，浮動(dòng)元素可以覆蓋普通元素，如果寬高合適，普通元素可以占據(jù)浮動(dòng)元素原來(lái)的位置

對(duì)文字的影響

文字(既inline-level)級(jí)的元素會(huì)環(huán)繞浮動(dòng)元素，表現(xiàn)的像是察覺到浮動(dòng)元素一樣。

GPU云服務(wù)器云服務(wù)器 html浮動(dòng)向上浮動(dòng) 上下浮動(dòng) 左右浮動(dòng) 表頭浮動(dòng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/50921.html

相關(guān)文章

【CSS學(xué)習(xí)】--- float浮動(dòng)屬性

摘要：浮動(dòng)框旁邊的行框被縮短，從而給浮動(dòng)框留出空間，行框圍繞浮動(dòng)框。不浮動(dòng)的浮動(dòng)的三浮動(dòng)之于塊浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂? 一、前言 ? 　　浮動(dòng)元素以脫離標(biāo)準(zhǔn)流的方式來(lái)實(shí)現(xiàn)元素的向左或向右浮動(dòng)，并且浮動(dòng)元素還是在原來(lái)的行上進(jìn)行浮動(dòng)的。float浮動(dòng)屬性的四個(gè)參數(shù)：left：元素向左浮動(dòng)；right：元素向右浮動(dòng)；none：默認(rèn)值，元素不浮動(dòng)；i...

TigerChain 2019-04-23 11:48 評(píng)論0 收藏0
關(guān)于浮動(dòng)與清除浮動(dòng)，你應(yīng)該知道的

摘要：清除浮動(dòng)并不是說讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對(duì)排在該元素前面的元素。我在做頁(yè)面布局的時(shí)候，多多少少總會(huì)受到來(lái)自浮動(dòng)的困擾，因此專門通過實(shí)踐來(lái)總結(jié)一下浮動(dòng)與清除浮動(dòng)。首先總結(jié)幾個(gè)基礎(chǔ)的概念：浮動(dòng)：設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，不會(huì)影響塊元素的布局，但是會(huì)影響內(nèi)聯(lián)元素的排列[通常是文本]；文檔流：在文檔流中，塊元素會(huì)單個(gè)元素獨(dú)占一行接下來(lái)我們通過實(shí)...

mengbo 2019-08-29 10:57 評(píng)論0 收藏0
關(guān)于浮動(dòng)與清除浮動(dòng)，你應(yīng)該知道的

摘要：清除浮動(dòng)并不是說讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對(duì)排在該元素前面的元素。我在做頁(yè)面布局的時(shí)候，多多少少總會(huì)受到來(lái)自浮動(dòng)的困擾，因此專門通過實(shí)踐來(lái)總結(jié)一下浮動(dòng)與清除浮動(dòng)。首先總結(jié)幾個(gè)基礎(chǔ)的概念：浮動(dòng)：設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，不會(huì)影響塊元素的布局，但是會(huì)影響內(nèi)聯(lián)元素的排列[通常是文本]；文檔流：在文檔流中，塊元素會(huì)單個(gè)元素獨(dú)占一行接下來(lái)我們通過實(shí)...

masturbator 2019-08-19 18:40 評(píng)論0 收藏0
關(guān)于浮動(dòng)與清除浮動(dòng)，你應(yīng)該知道的

摘要：清除浮動(dòng)并不是說讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對(duì)排在該元素前面的元素。我在做頁(yè)面布局的時(shí)候，多多少少總會(huì)受到來(lái)自浮動(dòng)的困擾，因此專門通過實(shí)踐來(lái)總結(jié)一下浮動(dòng)與清除浮動(dòng)。首先總結(jié)幾個(gè)基礎(chǔ)的概念：浮動(dòng)：設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，不會(huì)影響塊元素的布局，但是會(huì)影響內(nèi)聯(lián)元素的排列[通常是文本]；文檔流：在文檔流中，塊元素會(huì)單個(gè)元素獨(dú)占一行接下來(lái)我們通過實(shí)...

Donald 2019-08-01 15:23 評(píng)論0 收藏0
關(guān)于浮動(dòng)與清除浮動(dòng)，你應(yīng)該知道的

摘要：清除浮動(dòng)并不是說讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對(duì)排在該元素前面的元素。我在做頁(yè)面布局的時(shí)候，多多少少總會(huì)受到來(lái)自浮動(dòng)的困擾，因此專門通過實(shí)踐來(lái)總結(jié)一下浮動(dòng)與清除浮動(dòng)。首先總結(jié)幾個(gè)基礎(chǔ)的概念：浮動(dòng)：設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，不會(huì)影響塊元素的布局，但是會(huì)影響內(nèi)聯(lián)元素的排列[通常是文本]；文檔流：在文檔流中，塊元素會(huì)單個(gè)元素獨(dú)占一行接下來(lái)我們通過實(shí)...

ideaa 2019-06-27 13:59 評(píng)論0 收藏0