摘要：和可以看作是同父異母的兄弟關(guān)系。例子如下結(jié)果如下而父元素設(shè)置屬性的方式則是利用了的特性下面將會詳細講解結(jié)界全稱為，中文為塊級格式化上下文。

上一篇：《CSS世界》筆記三：內(nèi)聯(lián)元素與對齊
下一篇：《CSS世界》筆記五：CSS層疊規(guī)則及元素隱藏

原本博客名為“浮動與定位”，但是《CSS世界》第六章節(jié)的內(nèi)容不僅有浮動定位，很大一部分篇幅都在講BFC和overflow。更吸引人的是，作者將float/absolute/relative形容為“魔界三兄弟”，將原本枯燥的理論知識硬生生變成了玄幻小說。

absolute和float可以看作是“同父異母”的兄弟關(guān)系。它們的父親是同一個人，是CSS世界的大魔王，屬于魔界;但母親不是一個人，absolute的母親來自魔界，而 float的母親來自人界
如果說float和absolute是同父異母的兄弟關(guān)系，那么relative則是absolute的親大哥
當年魔界圣母position生了好幾個兒子，其中一個就是法力很強也很霸道的absolute，考慮到日后absolute會找float的麻煩而去正常流世界，以其個性和霸道的能力，一定會影響正常流世界的秩序，于是圣母position讓其性格敦實的大兒子relative直接在正常流世界生活，幫忙盯著absolute，不要讓absolute這個小魔鬼到處惹是生非

浮動本質(zhì)：實現(xiàn)文字環(huán)繞效果

現(xiàn)階段使用浮動一般是用來實現(xiàn)盒子水平顯示（左右兩欄布局），但是往往會造成浮動元素父盒子的塌陷；那么應(yīng)該如何清除浮動的影響呢？

網(wǎng)上隨意百度即可查詢到清除浮動的方法：

父元素設(shè)置overflow屬性來清除浮動

使用額外標簽法

偽元素清除

上面2、3兩種方法都是用clear進行清除，而clear清除浮動屬性本質(zhì)：clear 屬性是讓自身不能和前面的浮動元素相鄰，從而做到了清除浮動的效果。例子如下：

/* ul>li*7 */

li {
    width: 20px;
    height: 20px;
    background-color: #ccc;
    margin: 5px;
    float: left;
}
li:nth-of-type(3) {
    clear: both;
}

結(jié)果如下：

而“父元素設(shè)置overflow屬性”的方式則是利用了BFC的特性（下面將會詳細講解）

BFC全稱為block formatting context，中文為“塊級格式化上下文”。相對應(yīng)的還有IFC，也就是inline formatting context，中文為“內(nèi)聯(lián)格式化上下”

BFC表現(xiàn)原則：如果一個元素具有 BFC，內(nèi)部子元素再怎么翻江倒海、翻云覆雨，都不會影響外部的元素。所以，BFC 元素是不可能發(fā)生 margin 重疊的，因為 margin 重疊是會影響外面的元素的；BFC 元素也可以用來清除浮動的影響，因為如果不清除，子元素浮動則父元素高度塌陷，必然會影響后面元素布局和定位，這顯然有違 BFC 元素的子元素不會影響外部元素的設(shè)定

如何觸發(fā)BFC：

根元素

float 的值不為 none

overflow 的值為 auto、scroll 或 hidden

display 的值為 table-cell、table-caption 和 inline-block 中的任何一個

position 的值不為 relative 和 static

因此：只要滿足上面任何一條（觸發(fā)了BFC），元素就不會發(fā)生margin重疊和float帶來的“高度塌陷”問題

張大大布拉布拉用了大量的篇幅對比了實現(xiàn)BFC的各種方式，最后得出結(jié)論：overflow：hidden是觸發(fā)BFC最理想副作用最小的方式

    
    
我是帥哥，好巧啊，我也是帥哥，原來看這篇博客的人都是帥哥~


.father {
    max-width: 200px;
    border: 1px solid #444;
}
.father img {
    float:left;
    width: 60px;
    margin-right: 10px;
}
.bfc {
    overflow: hidden;
}

展示如下：

原理：利用BFC的結(jié)界特性避免了文字環(huán)繞（浮動），實現(xiàn)左側(cè)固定，右側(cè)自適應(yīng)的兩欄布局

再次聲明：overflow:hidden是觸發(fā)BFC的最佳結(jié)界

滾動條相關(guān)知識

移動端的屏幕尺寸本身就有限，滾動條一般都是懸浮模式，不會占據(jù)可用寬度，但是在PC端，尤其Windows操作系統(tǒng)下，幾乎所有瀏覽器的滾動欄都會占據(jù)寬度，而且這個寬度大小是固定的

如何獲取瀏覽器滾動欄寬度：

    



.box { width: 400px; overflow: scroll; }

console.log(400 - document.getElementById("in").clientWidth);

自定義滾動條屬性：

整體部分，::-webkit-scrollbar;

兩端按鈕，::-webkit-scrollbar-button;

外層軌道，::-webkit-scrollbar-track;

內(nèi)層軌道，::-webkit-scrollbar-track-piece;

滾動滑塊，::-webkit-scrollbar-thumb;

邊角，::-webkit-scrollbar-corner。

平時開發(fā)中比較常用的三個屬性：

::-webkit-scrollbar { /* 血槽寬度 */
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb { /* 拖動條 */
    background-color: rgba(0,0,0,.3);
    border-radius: 6px;
}
::-webkit-scrollbar-track { /* 背景槽 */
    background-color: #ffffd;
    border-radius: 6px;
}

小技巧：處理頁面滾動條晃動問題（一般出現(xiàn)在加載數(shù)據(jù)后超過一屏）

html {
    overflow-y: scroll; /* for IE8 */
}
:root {
    overflow-y: auto;
    overflow-x: hidden;
}
:root body {
    position: absolute;
}
body {
    width: 100vw;
    overflow: hidden;
}

單行文本溢出：

.ell {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

多行文本溢出（此處為2行）：

.ell-rows-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

兩種情況可以觸發(fā)錨點定位行為的發(fā)生：

（1）URL地址中的錨鏈與錨點元素對應(yīng)并有交互行為;

發(fā)展歷程>

發(fā)展歷程

利用上面的結(jié)構(gòu)，點擊a標簽，能夠使頁面滾動到h2處

（2）focus 錨點定位，可focus的錨點元素處于focus狀態(tài)

“focus 錨點定位”指的是類似鏈接或者按鈕、輸入框等可以被 focus 的元素在被 focus 時發(fā)生的頁面重定位現(xiàn)象。舉個很簡單的例子，在 PC 端，我們使用 Tab 快速定位可 focus 的元素的時候，如果我們的元素正好在屏幕之外，瀏覽器就會自動重定位，將這個屏幕之外的元素定位到屏幕之中

錨點定位的兩個小案例，以供參考：

錨點定位：返回頁面頂部

錨點定位：簡易tab切換

注意！注意！注意！元素設(shè)置了 overflow:hidden 聲明，里面內(nèi)容高度溢出的時候，滾動依然存在，僅僅滾動條不存在!，所以我們能用錨點定位或者js控制滾動

（1）塊級元素：相對于第一個position不為static的祖先元素，直到html

（2）行內(nèi)元素：

單行：假設(shè)給內(nèi)聯(lián)元素的前后各生成一個寬度為 0 的內(nèi)聯(lián)盒子(inline box)，則這兩個內(nèi)聯(lián)盒子的 padding box 外面的包圍盒就是內(nèi)聯(lián)元素的“包含塊”

多行：未定義行為，我們以chrome表現(xiàn)為主(由第一行開頭和最后一行結(jié) 尾的內(nèi)聯(lián)盒子共同決定)

直接看概念一般是一頭霧水，上圖吧(紅色虛線區(qū)域為包含塊)

案例：基于行內(nèi)元素定位的tips實現(xiàn)

.icon {
    margin: 50px 0 0 50px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(http://demo.cssworld.cn/images/6/delete.png) no-repeat center;
}

.tip {
    position: relative;
    &::before,
    &::after {
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        visibility: hidden;
    }
    &::before {
        content: attr(data-title);
        top: -33px;
        padding: 2px 10px 3px;
        line-height: 18px;
        border-radius: 2px;
        background-color: #333;
        text-align: left;
        color: #fff;
        font-size: 12px;
        /* 必須加，否則一柱擎天 */
        white-space: nowrap;
    }
    &::after {
        content: "";
        border: 6px solid transparent;
        border-top-color: #333;
        top: -10px;
    }
    &:hover::before,
    &:hover::after {
        transition: visibility .1s .1s;
        visibility: visible;
    }
}

最終實現(xiàn)效果：

注意：absolute 是非常獨立的 CSS 屬性值，其樣式和行為表現(xiàn)不依賴其他任何 CSS 屬性就可以完成，正是基于這一點才有了無依賴定位的強大

首先思考一個問題：如果一個標準流元素后面接著一個absolute元素（未設(shè)置left等方位屬性），此時如何顯示？定位元素后又接著一個標準流元素，此時又該如何顯示？

    哈哈，我在定位元素前面
    
    吶！我還在定位元素后面呢


.poa {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 0, 0, .5);
}

展示結(jié)果：

僅設(shè)置絕對定位時，定位元素仍會保持在html結(jié)構(gòu)位置，且不占據(jù)空間。由此，我們可以使用margin相對于原始位置定位該元素以實現(xiàn)各種功能。下面是幾個案例：

（1）案例1：簡單圖標定位

.icon-hot {
    position: absolute;
    width: 28px;
    height: 11px;
    margin: -6px 0 0 2px;
}

（2）案例2：校驗表單

/* 郵箱報錯小圖標 */
.icon-warn {
    position: absolute;
    margin-left: -18px;
    width: 16px; height: 20px;
    background: url(/images/6/warn.gif) no-repeat center;
}

/* 定位在盒子外部的紅色星號 */
.regist-star {
    position: absolute;
    margin-left: -1em;
    font-family: simsun;
    color: #f30;
}

（3）案例3：input中的icon和下拉

/* 搜索按鈕的無依賴絕對定位 */
.search-btn {
    width: 20px; height: 20px;
    border: 9px solid #fff;
    background: #ffffd url(search.png) no-repeat center;
    position: absolute; margin: 1px 0 0 -40px;
}

/* 下拉列表的無依賴絕對定位 */
.search-datalist {
    position: absolute;
    width: 248px;
    border: 1px solid #e6e8e9;
    background-color: #fff;
}

text-align 居然可以改變 absolute 元素的位置

p { text-align: center; }
img { position: absolute; }

原理：img前的“幽靈空白節(jié)點”受text-align:center;的影響居中，圖片的“無依賴絕對定位”在“幽靈空白節(jié)點”后面

案例：text-align實現(xiàn)的右外側(cè)定位

    

        
            
            
        
    


.constrcons {
    width: 80%;
    margin: auto;
    background-color: #f0f3f9;
}
.alignright {
    height: 0;
    text-align: right;
    overflow: hidden;
}
.alignright:before {
    content: "2002";
}

.follow {
    position: fixed;
    bottom: 100px;
    z-index: 1;
}
.follow > img {
    display: block;
    margin: 10px;
}

優(yōu)勢：icon相對于主體內(nèi)容定位，而不是相對于html

剪裁屬性 clip 要想起作用，元素必須是絕對定位或者固定定位，也就是 position 屬性值必須是 absolute 或者 fixed

最佳可訪問性隱藏

.clip {
    position: absolute;
    clip: rect(0 0 0 0);
}

采用這種方法隱藏的元素原本的行為特性也很好用。例如，依然可以被 focus，而且非常難得的是就地剪裁，因為屬于“無依賴的絕對定位”

當 absolute 遇到 left/top/right/bottom 屬性的時候，absolute 元素才真正變成絕對定位元素

absolute流體特性的條件是：對立方向同時發(fā)生定位的時候

如果設(shè)置left:0; right:0;表現(xiàn)為格式化寬度，水平方向保持流動性

如果設(shè)置top:0; bottom:0;表現(xiàn)為格式化高度，垂直方向保持流動性

絕對定位元素的margin:auto的填充規(guī)則和普通流體元素的一模一樣:

如果一側(cè)定值，一側(cè) auto，auto 為剩余空間大小;

如果兩側(cè)均是 auto，則平分剩余空間。

案例：利用absolute的流體特性實現(xiàn)元素的水平垂直居中

.element {
    width: 300px;
    height: 200px;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
}

浮動float以及clear屬性

BFC觸發(fā)條件及利用BFC實現(xiàn)更為健壯的布局

overflow屬性

內(nèi)聯(lián)盒子絕對定位的包含塊

absolute無依賴定位

absolute裁剪及流體特性

上一篇：《CSS世界》筆記三：內(nèi)聯(lián)元素與對齊
下一篇：《CSS世界》筆記五：CSS層疊規(guī)則及元素隱藏