BFC與自適應淺析

時間 2019-11-09

標籤 bfc 自適應淺析欄目 CSS 简体版

原文原文鏈接

本文是從以前的csdn上的亂七八糟的筆記整理過來的css

概念

　　Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。最多見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。BFC，塊級格式化上下文，是一個獨立的渲染區域，只有block-level-box級別參與，規定了內部如何佈局而且和外部絕不相干html

佈局規則

內部的Box會在垂直方向，一個接一個地放置。wordpress
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊佈局
每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。flex
BFC的區域不會與float box重疊。spa
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。code
計算BFC的高度時，浮動元素也參與計算orm

如何觸發`BFC`

根元素htm
float屬性不爲noneblog
position爲absolute或fixed
display爲inline-block, table-cell, table-caption, flex, inline-flex
overflow不爲visible

用途

清除浮動
原理：BFC能夠包含浮動
咱們能夠利用BFC的這個特性來「清浮動」，這裏其實說清浮動已經再也不合適，應該說包含浮動。
也就是說只要父容器造成BFC就能夠，觸發BFC方式見上
清除浮動比較好的方法：
1. ie8以上用clearfix：after
2. ie6，7用clearfix{*zoom:1;}
更好的方法：
.clearfix:after{content:'';display:table;clear:both;}

自適應佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .left {
            height: 200px;
            float: left;
            width: 300px;
            background-color: green;
        }
        .right {
            display: table-cell;
            width: 9999px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

觸發BFC自適應屬性對比