国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關于浮動與清除浮動，你應該知道的

Donald / 2561人閱讀

摘要：清除浮動并不是說讓浮動元素回到文檔流清除浮動只會改變改元素自身的位置，并且只針對排在該元素前面的元素。

我在做頁面布局的時候，多多少少總會受到來自浮動的困擾，因此專門通過實踐來總結一下浮動與清除浮動。

首先總結幾個基礎的概念：

浮動：設置浮動的元素會脫離文檔流，不會影響塊元素的布局，但是會影響內聯(lián)元素的排列[通常是文本]；

文檔流：在文檔流中，塊元素會單個元素獨占一行

接下來我們通過實際演示來看看關于浮動的那些事兒。

下面是5個div塊元素在文檔流中一次排列

我們知道浮動元素有幾個規(guī)律

如果浮動元素的上一個元素也是浮動，那么該元素會與上一個元素排列在同一行，如果行寬不夠，后面的元素會被擠到下一行

如果浮動元素的上一個元素不是浮動，那么該元素仍然處于上一個元素的下方，根據(jù)浮動設定在左或者在右，而其本身也脫離文檔流。后邊的元素會自動往上移動到上一個文檔流塊元素下方為止

根據(jù)上面的規(guī)則，我們做一些改動來驗證一下

給2添加左浮動，給3添加右浮動

首先1沒有浮動，所以2在1的下一行，而3的上一個元素2是有浮動的，所以3和2在同一行，2和3因為有了浮動，所以脫離了文檔流，他們后面的元素4就自動往上移動，處于1的下方

給元素2添加左浮動

因為它的上一個元素1沒有浮動，所以排列在1的下方，不和1同一行。而元素2同時脫離了普通流，因此后邊的元素會頂替上來

因此，浮動元素的位置是根據(jù)他的上一個元素來確定的[以及浮動位置來確定]

清除浮動

可能浮動會比較好理解一點，而不少人會對清除浮動有一些誤解。

清除浮動并不是說讓浮動元素回到文檔流

清除浮動只會改變改元素自身的位置，并且只針對排在該元素前面的元素。目的是讓自己的左邊或者右邊沒有浮動元素

例子1

給2添加左浮動，給3添加右浮動，之后給3添加清除左邊的浮動。

因為2是3的上一個元素，所以給3清除浮動，只有2才能影響他的位置，而2在3的左邊，因此只有給3添加清除左浮動才有效果，清除左邊浮動的意思，就是讓2不在3的左邊，所以3會改變自己的位置，移動到2的下一行，但是右浮動的效果任然在，所以在下一行的右側

再給5添加刪除右浮動效果，因為5的右邊有一個浮動元素是3，而3是5前面的元素，因此5會改變位置，讓自己左右沒有浮動元素

例子2

給1，2，3，4添加左浮動

然后給3添加清除左浮動的效果。如果直接給3清除右浮動，將沒有任何變化，因為3右邊的浮動效果是4，而4處于3的后邊，不會影響3的位置

關于高度坍塌

當沒有指定高度的父元素中的子元素全部都浮動時，父元素中內部高度因為是普通流中的塊元素撐起來的，所以這個時候父元素的高度會變成0.或者會有部分浮動元素的位置會超出父元素的高度之外。這種現(xiàn)象，叫做高度坍塌。

如下圖，給元素設置左浮動。設置了邊框的父元素因為沒有高度所以上下邊框重合，看上去就像一條線

解決方法：使用:after偽元素


    
  
  
    
    高度坍塌

after的原理是在div1的子元素最末尾添加一個元素，如果該元素能夠位于div2的后面，并且沒有浮動，那么父元素div1的高度就會重新獲取。因此使用了上方的解決方案

因此，閉合浮動之后，一切恢復正常

這就是通過在子元素末尾添加偽元素來解決高度坍塌問題的解決方案。

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49879.html

相關文章

  • 關于浮動與清除浮動，你應該知道的

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

    mengbo 評論0 收藏0

  • 關于浮動與清除浮動，你應該知道的

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

    masturbator 評論0 收藏0

  • 關于浮動與清除浮動，你應該知道的

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

    ideaa 評論0 收藏0

  • 你從來沒了解過的CSS浮動 | Design Shack

    摘要：另一種元素是內聯(lián)元素，它們會與之前的內容保持顯示在一行。即使圖片是內聯(lián)元素，它們也被它們的父塊級元素列表項控制。當一行中多個元素被浮動，它們會產生同內聯(lián)元素的流類似的效果。浮動元素不能高過前一行內聯(lián)元素。 浮動到底是做什么呢？他們是如何影響相關元素的盒模型的呢？浮動的元素與內聯(lián)元素有什么不同呢？制定浮動元素的位置的具體規(guī)則是什么？clear屬性是如何工作的，并且它的作用是什么？ 即使是...

    XGBCCC 評論0 收藏0

發(fā)表評論

0條評論

Donald

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<