float與absolute脫離文檔流的區別

itvincent 發布于2019-08-29 11:29 / 1392人閱讀

摘要：對于使用脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。例如將上例中改為。可以看到，第二個的文字亦被第一個的文字給覆蓋了

使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。例如：

 .firstdiv{
    background-color:rgba(125,125,235,0.4);
    height:200px;
    width: 200px;
    float: left;
  }
  .seconddiv{
    background-color: #faf;
    height:300px;
    width: 300px;
    border:1px solid red;
  }
  
     這是第一個DIV
  
  
     這是第二個DIV

根據chrome調試和紅色邊框，可以看到第二個div的背景和邊框是占據了第一個DIV的空間的，但是第二個div的文本仍然為第一個DIV留出了位置。

對于使用absolute position脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。
例如：將上例中float：left改為position: absolute。可以看到，第二個div的文字亦被第一個div的文字給覆蓋了

云服務器 GPU云服務器 java輸出流的區別云文檔與服務器云文檔與服務器連接 absoluted

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

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

float與absolute脫離文檔流的區別

摘要：對于使用脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。例如將上例中改為。可以看到，第二個的文字亦被第一個的文字給覆蓋了使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。例如： .firstdiv{ background-color:rgba(125,125,235,0.4); height:200p...

fantix 2019-08-01 15:53 評論0 收藏0
“位置”在css里的細節

摘要：在確定頁面元素的準確位置時，需要細致地參考這些邊。它們的位置從下到上依次是為負的定位元素。本文只介紹了一部分有關位置的細節知識，如果你也曾對這些內容有所困惑，那么希望能有所幫助。位置是個怎樣的概念哎，這個元素怎么跑那里去了？回想一下，在我們覺得樣式崩了，頁面出bug了的時候，是不是會有相當一部分情況都可以描述成上面這句話呢？我們在寫css的時候，就會經常考慮位置這個事。理念就是...

Cristalven 2019-08-28 18:20 評論0 收藏0
CSS 3-浮動、定位

摘要：讓元素脫離文檔流有三種方法浮動絕對定位固定定位元素脫離文檔流定位的三種布局機制文檔流浮動定位。定位元素會脫離文檔流。浮動的元素是先站住自己所在文檔流的位置，然后左右浮動。文檔流文檔流是一種默認定位方式，在文檔流中元素框的位置由元素在html中的位置決定，文檔流中元素的position屬性為默認的static或繼承來的static并按照普通流定位。塊級元素獨占一行，自上而下排列；內聯...

TalkingData 2019-08-29 15:32 評論0 收藏0
【學習筆記】CSS深入理解之absolute

摘要：張鑫旭的深入理解之學習筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。利用絕對定位元素脫離文檔流的特性，使用動畫可以避免大范圍的回流和重繪。絕對定位元素拉伸實現寬高自適應，可應用于大范圍的布局。《張鑫旭的CSS深入理解之absolute》學習筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。浮動的一些應用場景中也可用絕對定位替代絕對定位的行為表現無依賴絕對...

Anleb 2019-08-30 15:54 評論0 收藏0
html和css常見的一些問題總結

摘要：至于說，，，屬性是脫離文檔流的，這個估計也是我們剛開始用得最多的，最方便的一個，同時也會給我們帶來許多問題，這一次你會發現與前面的，有相同的地方，都是覆蓋，不同的是，里文字被擠出來，這也是之前主要是用來做文字環繞效果有關。 html 標簽一般在html有塊級元素和行級元素，主要的塊級元素有 div，p，h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有...

EddieChan 2019-08-30 12:53 評論0 收藏0