BFC概念和作用，觸發條件

本文轉載自查看原文 2018-03-05 16:15 1044 html css/ 楊龍飛/ 自適應兩欄布局/ BFC

1、概念，全稱是block format context，塊級格式化上下文

2、觸發條件

根元素 float屬性不為none

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

overflow不為visible

3、應用場景

自適應兩欄布局

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

清除浮動

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
        overflow:hidden;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

防止垂直 margin 重疊

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 MinorGC和FullGC的觸發條件 el-menu @open 觸發條件 QTcpSocket的readyRead信號觸發條件解釋 input的onchange事件實際觸發條件與解決方法 Minor GC ，major GC,Full GC 觸發條件 GC詳解及Minor GC和Full GC觸發條件總結 BFC及其作用 unity 所有碰撞器（觸發器），碰撞條件、結果，觸發條件、結果。。。以及碰撞函數、觸發函數的調用。關於html頁面中Input(文本框)控件OnChange事件的觸發條件 BFC是什么？有什么作用？