css裏的BFC的用法

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>

運行結果:

圖片描述圖片描述

解析:左邊第一幅圖是被浮動元素侵佔,爲了解決這個問題只用在.jfj標籤上加上overflow: hidden就能夠;

總結:以上就是關於BFC的一些分析,BFC 是一種概念,是對前端佈局技術的一種理論上的總結,掌握它可讓咱們在使用CSS +DIV進行佈局時,知道一些特殊操做以及規避問題的原理。BFC的概念比較抽象,但經過實例分析,有助於咱們對BFC的理解。

在此僅列舉了幾個例子,歡迎你們一塊兒探索更多^_^

相關文章
相關標籤/搜索