css 清除浮動的方法及BFC剖析

一易遣、常用css定位流描述

1睦裳、文檔流定位 position: static(默認(rèn)方式)

頁面元素的默認(rèn)定位方式

  • 塊級元素:按照從上到下的方式逐個排列
  • 行內(nèi)元素:按照從左到右的方式逐個排列

但是如何讓多個塊級元素在一行內(nèi)顯示? 方法之一:浮動定位

2、浮動定位 float

floa: left/right
這個屬性原本是用來做文字環(huán)繞的镀迂,但是后來大家發(fā)現(xiàn)做布局也不錯尘盼,就一直這么用了

3宦焦、相對定位 position: relative

元素會相對于它原來的位置偏移某個距離,改變元素位置后审残,元素原本的空間依然會被保留(不會脫離文檔流)

4夺刑、絕對定位 position: absolute

特征:

  • 1谢翎、脫離文檔流-不占據(jù)頁面空間
  • 2盾舌、通過偏移屬性固定元素位置
  • 3、相對于最近的已定位的祖先元素實(shí)現(xiàn)位置固定
  • 4稽煤、如果沒有已定位祖先元素核芽,那么就相對于最初的包含塊(body,html)去實(shí)現(xiàn)位置的固定

二、浮動的效果

  • 1酵熙、浮動定位元素會被排除在文檔流之外-脫離文檔流(不占據(jù)頁面空間),其余的元素要上前補(bǔ)位
  • 2轧简、浮動元素會停靠在父元素的左邊或右邊匾二,或拖溃靠在其他已浮動元素的邊緣上(元素只能在當(dāng)前所在行浮動)
  • 3、浮動元素依然位于父元素之內(nèi)
  • 4察藐、浮動元素處理的問題-解決多個塊級元素在一行內(nèi)顯示的問題

注意

  • 1皮璧、一行內(nèi),顯示不下所有的已浮動元素時分飞,最后一個將換行
  • 2悴务、元素一旦浮動起來之后,那么寬度將變成自適應(yīng)(寬度由內(nèi)容決定)
  • 3譬猫、元素一旦浮動起來之后讯檐,那么就將變成 類似行內(nèi)塊級元素
  • 4、文本删窒,行內(nèi)元素裂垦,行內(nèi)塊元素時采用環(huán)繞的方式來排列的顺囊,是不會被浮動元素壓在底下的肌索,會巧妙的避開浮動元素

浮動的影響?

由于浮動元素會脫離文檔流特碳,所以導(dǎo)致不占據(jù)頁面空間诚亚,所以會對父元素高度帶來一定影響。如果一個元素中包含的元素全部是浮動元素午乓,那么該元素高度將變成0(高度塌陷

三站宗、清除浮動

方案1

  • 直接設(shè)置父元素的高度
  • 優(yōu)勢:極其簡單
  • 弊端:必須要知道父元素高度是多少

方案2

  • 在父元素中,追加空子元素益愈,并設(shè)置其clear屬性為both
  • clear是css中專用于清除浮動的屬性
  • 作用:清除當(dāng)前元素前面的元素浮動所帶來的影響
    取值:
    • 1梢灭、none:默認(rèn)值夷家,不做任何清除浮動的操作
    • 2、left: 清除前面元素左浮動帶來的影響
    • 3敏释、right:清除前面元素右浮動帶來的影響
    • 4库快、both: 清除前面元素所有浮動帶來的影響
  • 優(yōu)勢:代碼量少 容易掌握 簡單易懂
  • 弊端:會添加許多無意義的空標(biāo)簽,有違結(jié)構(gòu)與表現(xiàn)的分離钥顽,不便于后期的維護(hù)

方案3

  • 設(shè)置父元素浮動
  • 優(yōu)勢:簡單义屏,代碼量少,沒有結(jié)構(gòu)和語義化問題
  • 弊端:對后續(xù)元素會有影響

方案4

  • 為父元素設(shè)置overflow屬性
  • 取值:hidden 或 auto
  • 優(yōu)勢:簡單蜂大,代碼量少
  • 弊端:如果有內(nèi)容要溢出顯示(彈出菜單)闽铐,也會被一同隱藏

方案5

  • 父元素設(shè)置display:table
  • 優(yōu)勢:不影響結(jié)構(gòu)與表現(xiàn)的分離,語義化正確奶浦,代碼量少
  • 弊端:盒模型屬性已經(jīng)改變兄墅,會造成其他問題

方案6

使用內(nèi)容生成的方式清除浮動

.clearfix:after {
   content:""; 
   display: block; 
   clear:both; 
}
  • :after 選擇器向選定的元素之后插入內(nèi)容
  • content:""; 生成內(nèi)容為空
  • display: block; 生成的元素以塊級元素顯示,
  • clear:both; 清除前面元素浮動帶來的影響
  • 相對于空標(biāo)簽閉合浮動的方法
  • 優(yōu)勢:不破壞文檔結(jié)構(gòu),沒有副作用
  • 弊端:代碼量多

方案7

.cf:before,.cf:after {
   content:"";
   display:table;
}
.cf:after { clear:both; }
  • 優(yōu)勢:不破壞文檔結(jié)構(gòu)澳叉,沒有副作用
  • 弊端: 代碼量多

注意:display:table本身無法觸發(fā)BFC察迟,但是它會產(chǎn)生匿名框(anonymous boxes),而匿名框中的display:table-cell可以觸發(fā)BFC耳高,簡單說就是扎瓶,觸發(fā)塊級格式化上下文的是匿名框,而不是display:table泌枪。所以通過display:table和display:table-cell創(chuàng)建的BFC效果是不一樣的(后面會說到BFC)概荷。

CSS2.1 表格模型中的元素,可能不會全部包含在除HTML之外的文檔語言中碌燕。這時误证,那些“丟失”的元素會被模擬出來,從而使得表格模型能夠正常工作修壕。所有的表格元素將會自動在自身周圍生成所需的匿名table對象愈捅,使其符合table/inline-table、table-row慈鸠、table- cell的三層嵌套關(guān)系蓝谨。

疑問

  • 為什么會margin邊距重疊?
  • overflow:hidden, 語義應(yīng)該是溢出:隱藏青团,按道理說譬巫,子元素浮動了,但依然是在父元素里的督笆,而父元素高度塌陷芦昔,高度為0了,子元素應(yīng)該算是溢出了娃肿,為什么沒有隱藏咕缎,反而撐開了父元素的高度珠十?
  • 為什么display:table也能清除浮動,原理是什么凭豪?

三宵睦、頁面渲染規(guī)則(Formatting context)

Formatting context是W3C CSS2.1規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域墅诡,并且有一套渲染規(guī)則壳嚎,它決定了其子元素將如何定位,以及和其他元素的關(guān)系和相互作用末早。
最常見的Formatting context有Block fomatting context(簡稱BFC)和Inline formatting context(簡稱IFC)烟馅。
CSS2.1 中只有BFCIFC, CSS3中還增加了GFCFFC

BFC

BFC(Block formatting context)直譯為”塊級格式化上下文”:。它是一個獨(dú)立的渲染區(qū)域然磷,只有Block-level box參與郑趁, 它規(guī)定了內(nèi)部的Block-level Box如何布局,并且與這個區(qū)域外部毫不相干姿搜。

  • block-level box寡润,display屬性為block, list-item, table的元素,會生成block-level box舅柜。并且參與block fomatting context梭纹。
  • inline-level box, display屬性為inline, inline-block, inline-table的元素致份,會生成inline-level box变抽。并且參與inline formatting context。
BFC布局規(guī)則:
  • 1氮块、內(nèi)部的Box會在垂直方向绍载,按照從上到下的方式逐個排列。
  • 2滔蝉、Box垂直方向的距離由margin決定击儡。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
  • 3、每個元素的margin box的左邊蝠引, 與包含塊border box的左邊相接觸(對于從左往右的格式化阳谍,否則相反)。即使存在浮動也是如此立肘。
  • 4边坤、BFC的區(qū)域不會與float box重疊。
  • 5谅年、BFC就是頁面上的一個隔離的獨(dú)立容器,容器里面的子元素不會影響到外面的元素肮韧。反之也如此融蹂。
  • 6旺订、計算BFC的高度時,浮動元素的高度也參與計算
觸發(fā)BFC的條件
  • 1超燃、根元素
  • 2区拳、float (left,right)
  • 3意乓、overflow 除了visible 以外的值(hidden樱调,auto,scroll )
  • 4届良、display (table-cell笆凌,table-caption,inline-block)
  • 5士葫、position(absolute乞而,fixed)
BFC example
  • 1、依據(jù)BFC布局規(guī)則第二條:
    Box垂直方向的距離由margin決定慢显。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
    注意:發(fā)生重疊后爪模,外邊距的高度等于兩個發(fā)生重疊的外邊距的高度中的較大者
<style>
   .top{
    width:100px;
    height:100px;
    background:red;
    margin:50px;
   }
   .bottom{
    width:100px;
    height:100px;
    background:blue;
    margin:20px;
   }
</style>
<body>
    <div class="top">上</div>
    <div class="bottom">下</div>
</body>
image.png
  • 2、依據(jù)BFC布局規(guī)則第三條:
    每個元素的margin box的左邊荚藻, 與包含塊border box的左邊相接觸(對于從左往右的格式化屋灌,否則相反)。即使存在浮動也是如此应狱。
    我們可以看到声滥,雖然有浮動的元素top,但是bottom的左邊依然與包含塊的左邊相接觸侦香。
<style>
   .top{
    width:100px;
    height:100px;
    background:red;
    float:left;
   }
   .bottom{
    width:200px;
    height:200px;
    background:blue;
   }
</style>
<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>
image.png
  • 3落塑、依據(jù)BFC布局規(guī)則第四條:
    BFC的區(qū)域不會與float box重疊。
    看代碼和效果圖罐韩,可以看出憾赁,這次的代碼比上面的代碼多了一行overflow:hidden;用這行代碼觸發(fā)新的BFC后,由于這個新的BFC不會與浮動的top重疊散吵,所以bottom的位置改變了
<style>
   .top{
    width:100px;
    height:100px;
    background:red;
    float:left;
   }
   .bottom{
    width:200px;
    height:200px;
    background:blue;
    overflow:hidden;
   }
</style>
<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>
image.png
  • 4龙考、依據(jù)BFC布局規(guī)則第六條:
    計算BFC的高度時,浮動元素的高度也參與計算矾睦。
    到此我們應(yīng)該是解決了上面的所有疑問了晦款。
<style>
   p{
    width:100px;
    height:100px;
    background:red;
    float:left;
   }
   div{
    width:200px;
    border:1px solid blue;
   }
</style>
<body>
    <div>
       <p></p>
    </div>
</body>
image.png

當(dāng)div增加 overflow:hidden; 時 效果如下


image.png

清除浮動的方式有很多種,但是實(shí)現(xiàn)的原理主要是靠clear屬性和觸發(fā)新的BFC枚冗,通過詳細(xì)的解釋與比較缓溅,最后兩種內(nèi)容生成的方式是比較推薦使用的,如果需要考慮margin重疊的問題赁温,就用方案7坛怪,不考慮就用方案6

  • 5淤齐、自適應(yīng)兩欄布局
<style>    
    body {
        width: 300px;
        position: relative;    
    }     
    .aside { 
        width: 100px; 
        height: 150px;  
        float: left; 
        background: #f66;
    }     
    .main {
        height: 200px;
        background: #fcc;
               overflow: hidden;
    }
</style>
<body> 
    <div class="aside"></div>    
    <div class="main"></div>
</body>

每個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對于從左往右的格式化,否則相反)。即使存在浮動也是如此袜匿。
因此,雖然存在浮動的元素aslide,但main的左邊依然會與包含塊的左邊相接觸更啄。
根據(jù)BFC布局規(guī)則第四條:
BFC的區(qū)域不會與float box重疊。
我們可以通過通過觸發(fā)main生成BFC, 來實(shí)現(xiàn)自適應(yīng)兩欄布局居灯。
.main { overflow: hidden/auto;}
當(dāng)觸發(fā)main生成BFC后,這個新的BFC不會與浮動的aside重疊祭务。因此會根據(jù)包含塊的寬度,和aside的寬度,自動變窄。效果如下:

參考文獻(xiàn):https://blog.csdn.net/FE_dev/article/details/68954481

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末怪嫌,一起剝皮案震驚了整個濱河市义锥,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌喇勋,老刑警劉巖缨该,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異川背,居然都是意外死亡贰拿,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門熄云,熙熙樓的掌柜王于貴愁眉苦臉地迎上來膨更,“玉大人,你說我怎么就攤上這事缴允〖允兀” “怎么了?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵练般,是天一觀的道長矗漾。 經(jīng)常有香客問我,道長薄料,這世上最難降的妖魔是什么敞贡? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮摄职,結(jié)果婚禮上誊役,老公的妹妹穿的比我還像新娘。我一直安慰自己谷市,他們只是感情好蛔垢,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著迫悠,像睡著了一般鹏漆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天甫男,我揣著相機(jī)與錄音且改,去河邊找鬼验烧。 笑死板驳,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的碍拆。 我是一名探鬼主播若治,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼感混!你這毒婦竟也來了端幼?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤弧满,失蹤者是張志新(化名)和其女友劉穎婆跑,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體庭呜,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡滑进,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了募谎。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扶关。...
    茶點(diǎn)故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖数冬,靈堂內(nèi)的尸體忽然破棺而出节槐,到底是詐尸還是另有隱情,我是刑警寧澤拐纱,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布铜异,位于F島的核電站,受9級特大地震影響秸架,放射性物質(zhì)發(fā)生泄漏揍庄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一咕宿、第九天 我趴在偏房一處隱蔽的房頂上張望币绩。 院中可真熱鬧,春花似錦府阀、人聲如沸缆镣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽董瞻。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間钠糊,已是汗流浹背挟秤。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留抄伍,地道東北人艘刚。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像截珍,于是被迫代替她去往敵國和親攀甚。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評論 2 349

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案岗喉? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評論 1 92
  • 1. 前言 前端圈有個“骨锒龋”:在面試時,問個css的position屬性能刷掉一半人钱床,其中不乏工作四五年的同學(xué)荚斯。在...
    YjWorld閱讀 4,428評論 5 15
  • BFC CSS中的BFC BFC:block formatting context塊級格式化上下文; BFC 與清...
    小人物的秘密花園閱讀 608評論 0 0
  • 文章版權(quán)歸饑人谷_Lyndon以及饑人谷所有。 1. 浮動元素有什么特征僧免?對父容器刑赶、其他浮動元素、普通元素懂衩、文字分...
    HungerLyndon閱讀 2,376評論 4 10
  • 20170913,周三撞叨。 感賞自己一大早起來給老公準(zhǔn)備午餐,感賞自己堅持游泳1000米浊洞。 ...
    記得祝福閱讀 106評論 6 6