css裏的BFC的用法

時間 2019-12-05

標籤 css bfc 用法欄目 CSS 简体版

原文原文鏈接

1、對BFC的瞭解

Block Formatting Contexts (BFC，塊級格式化上下文)，就是一個塊級元素的渲染顯示規則

（能夠把 BFC 理解爲一個封閉的大箱子，，容器裏面的子元素不會影響到外面的元素）

2、如何觸發BFC

只要元素知足下面任一條件便可觸發 BFC 特性：

body 根元素；
浮動元素：float 不爲none的屬性值；
絕對定位元素：position (absolute、fixed)
display爲： inline-block、table-cell、flex
overflow 除了visible之外的值 (hidden、auto、scroll)

3、BFC的佈局規則

內部的盒子會在垂直方向，一個個地放置；

BFC是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然
屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊；
計算BFC的高度時，浮動元素也參與計算
每一個元素的左邊，與包含的盒子的左邊相接觸，即便存在浮動也是如此；
BFC的區域不會與float重疊；

BFC的應用

一、解決margin重疊問題

示例：

<!doctype html>    
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
.container {
    background-color: red;
    overflow: hidden;
    width:200px;
    }
    
    p {
    margin: 10px 0;
    background-color: lightgreen;
    width:200px;
}
.newBFC {
    overflow: hidden;
}



</style>

</head>
<body>
<div class="container">
    <p> 1</p>
    <p> 2</p>
    <div class="newBFC">
        <p> 3</p>
    </div>
</div>

</body
</html>

運行結果

解析：1和2margin重疊了；爲了讓3不跟1，2同樣只用在3上面加一個overflow: hidden。

二、解決浮動高度塌陷問題

示例：

<!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>BFC浮動問題</title>
    <style>
        .one {
            /* 文檔流 裏面的文字標籤將父元素撐起來 */
            background-color: pink;
            background-color: pink;
            overflow: hidden;

        }
        .two {
            float: left;
        }
    </style>
</head>
<body>
    <!-- 文檔流 從上到下,當遇到float、position：absolute時，會離開文檔流 -->
    <div class="one">
    <div class="two">Hello World!</div>
    </div>
    你好世界！
</body>
</html>

運行結果：

解析：第一幅圖是浮動塌陷了，爲了解決這個問題只用在.one標籤上加上overflow: hidden;

3、解決侵佔浮動元素的問題

示例：

<!doctype html>    
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
    .dsj{height: 100px;
        width: 100px;
        float: left;
        background: #ff0}
        
        
    .jfj{
        width: 200px;
        height: 200px;
        background: #eee; 
        overflow:hidden;
    }
</style>
<body>
<div class="dsj">1</div>
<div class="jfj">2</div>
</body>    
</html>