浮動

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

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

最近在學浮動的知識，下面總結(jié)了一些浮動的一些特征

1. 塊級元素浮動將并排顯示，不再獨占一行

示例代碼：




    
    
    
    Document

效果：

修改：

修改效果：

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

示例代碼：




    
    
    
    Document

效果：

修改：

修改效果：

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

從上圖可以看出，默認三個設(shè)置了寬高的block元素，本來會格子獨占一行；如果框1設(shè)置了向左/向右浮動，他會忽略框2和框3，直到碰到父元素；同時也存在蓋住普通元素的風險。

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

示例代碼：




    
    
    
    Document

效果：

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

浮動元素對父元素的影響

對父容器若子元素都是浮動元素，則無法撐開父元素高度，父元素失去高度。

浮動元素其他浮動元素的影響

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

示例代碼1（塊太窄，向下移動）：

效果：

示例代碼2（卡住）:

效果：

浮動元素對普通元素的影響

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

對文字的影響

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50921.html

相關(guān)文章

【CSS學習】--- float浮動屬性

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

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

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

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

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

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

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

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

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

ideaa 2019-06-27 13:59 評論0 收藏0