BFC相關知識

時間 2019-11-10

標籤 bfc 相關知識简体版

原文原文鏈接

1、什麼是BFCcss

css佈局主要採用盒子模型（BOX），元素的類型和 display 屬性，決定了 Box 的類型，常見的盒子類型有兩種：html

block-level box:display 屬性爲 block, list-item, table 的元素，會生成 block-level box。
inline-level box:display 屬性爲 inline, inline-block, inline-table 的元素，會生成 inline-level box。

不一樣類型的BOX如何渲染是由Formatting context決定的,Formatting context是頁面中的一個渲染區域，而且擁有一套渲染規則，它決定了其子元素如何定位，以及與其餘元素的相互關係和做用。最多見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。佈局

BFC(Block formatting context)直譯爲"塊級格式化上下文"，它的做用對像是block-level類型的盒子，是頁面上具備隔離功能的獨立容器，它規定了其內部的Block-level Box如何佈局，容器裏面的子元素不會影響到外面的元素。flex

2、BFC佈局規則ui

1.內部的Box在垂直方向一個接一個地放置。spa

2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊3d

3.全部屬於BFC的box都默認左對齊，而且它們的左邊距能夠觸及到容器container的左邊。浮動的box也不例外code

4.BFC的區域不會與float box重疊。orm

這個看字面意思很差理解，直接看例子htm

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title></title>  
<style>  
*{  
    margin:0;  
    padding:0;  
    font-size:12px;  
}  
.box{  
    width:300px;  
    overflow:auto;  
}  
.leftbox{  
    background:#CCC;  
    width:100px;  
    height:30px;  
    float:left;
}  
.textbox{  
    width:200px;  
    background:#FFCCCC;  
}  
</style>  
</head>  
  
<body>  
<div class="box">  
    <div class="leftbox">浮動元素</div>
    <div class="textbox">文字從這裏開始，不會被浮動元素遮住</div>  
</div>  
</body>  
</html>

5.計算BFC的高度時，浮動元素也參與計算

整個佈局規則能夠體現爲下面這張圖

3、哪些元素會生成BFC

根元素（也就是body元）
float屬性不爲none
position爲absolute或fixed
display爲inline-block, table-cell, table-caption, flex, inline-flex
overflow不爲visible

4、BFC應用場景

1.防止外邊距合併，外邊距合併的文章，請點這篇

2.清除子元素的浮動(子元素浮動後會引發父元素容器高度塌陷)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .par {
        border: 5px solid blue;
        width: 300px;
    }
 
    .child {
        border: 1px solid green;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child">子元素1</div>
        <div class="child">子元素2</div>
    </div>
</body>
</html>

咱們想要的效果以下圖

代碼執行後實際效果

爲達到清除內部浮動，咱們能夠觸發par生成BFC，那麼par在計算高度時，par內部的浮動元素child也會參與計算。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。