position和BFC

xiongzenghui 發布于2019-04-23 13:41 / 2794人閱讀

摘要：相對定位相對自身位置定位，不會脫離文本流，相當于是個參照物，給子代元素作為參照。絕對定位脫離文本流，不占據空間，相對于最近的有定位屬性的祖籍元素定位。固定定位相對于窗口進行定位。

一、關于position
流定位：不能通過left/top屬性來進行定位（那用什么定位），上下排列的元素縱向邊距會被合并，左右元素橫向邊距不會合并。
浮動定位：脫離文本流，就好像不在父元素中，像是浮在父元素的上方。
相對定位：相對自身位置定位，不會脫離文本流，相當于是個參照物，給子代元素作為參照。
絕對定位：脫離文本流，不占據空間，相對于最近的有定位屬性的祖籍元素定位。
固定定位：相對于窗口進行定位。

二、BFC 塊級格式化上下文
BFC會阻止垂直外邊距的折疊，對于的嵌套元素來說，只要將父元素設置BFC就不會和父元素的margin重疊了

（這么牛X怎么實現BFC）

形成條件：
float：left/right
overflow:hidden/auto/scroll
display:inline-block
position:absolute/fixed

常見的清除浮動的方法
1、

zoom:1;
after{
    content:" ";
    display:block;
    height:0;
    visibility:hidden;
    clear:left;
}

2、

zoom:1;
after{
    content:"";
    display:table;
    clear:borth;
}

清除浮動只有兩種方式，一種是用clear清除浮動，二是使用父級元素形BFC。

GPU云服務器云服務器 float和position bfc bfc布局 position()

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

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

CSS中重要的BFC

摘要：中有個重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡介在解釋之前，先說一下文檔流。我們常說的文檔流其實分為定位流浮動流普通流三種。使用包含浮動元素注意，這里觸發并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡介在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實分為定位...

plus2047 2019-08-29 14:20 評論0 收藏0
《CSS世界》筆記四：流的保護與破壞

摘要：和可以看作是同父異母的兄弟關系。例子如下結果如下而父元素設置屬性的方式則是利用了的特性下面將會詳細講解結界全稱為，中文為塊級格式化上下文。上一篇：《CSS世界》筆記三：內聯元素與對齊下一篇：《CSS世界》筆記五：CSS層疊規則及元素隱藏寫在前面原本博客名為浮動與定位，但是《CSS世界》第六章節的內容不僅有浮動定位，很大一部分篇幅都在講BFC和overflow。更吸引人的是，作者將...

he_xd 2019-08-29 16:20 評論0 收藏0
關于CSS中設置overflow屬性的值為hidden的相關理解

摘要：非根元素，且其屬性是和的元素的包含塊它的包含塊是由最近的祖先塊容器盒的內容區域創建的。如何觸發只需要保證滿足下面至少一條就會觸發根元素設置了值不為的元素設置了屬性不為的元素設置了屬性不為和的元素設置了的值為和中的任何一個的元素。作者：心葉時間：2018-04-18 17:53 包裹元素剪裁條件是不是包裹元素overflow設置為hidden以后，內部元素如果超過包裹元素的話就會被剪...

codercao 2019-08-29 15:06 評論0 收藏0
深入理解css之BFC

摘要：屬性，會破壞文檔流，與非定位元素很難結合起來用，因此也不適合自適應布局。，其對無感，無法自適應剩余瀏覽器空間。總結的定義，就如同結界一樣，完全封閉對外無任何影響。引起的各種屬性與自適應布局自適應布局與屬性說明 BFC的定義 BFC的全稱是block formatting context（塊狀格式化上下文），當BFC起作用的時候，其元素內部無論怎么翻江倒海都不會影響到外部元素，同樣，外部...

姘擱『 2019-08-30 15:54 評論0 收藏0
CSS魔法堂：你一定誤解過的Normal flow

摘要：后來終于知道是某位大神將翻譯為文檔流而已。。。。。。另外單純設置效果與采用是一樣的魔法堂就這個樣，而浮動定位也是基于。相對定位的最強武器就是個屬性了，好明顯它們默認值均是。前言 ?剛接觸CSS時經常聽到看到一個詞文檔流，那到底什么是文檔流呢？然后會看到絕對定位和浮動定位能脫離文檔流，從這句可以看到文檔流和絕對定位、浮動定位是同一個范疇的概念，再后來在W3C標準文檔找到關于Absolu...

Hancock_Xu 2019-08-30 12:56 評論0 收藏0