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>

 

posted on 2018-03-05 16:15  杨龙飞  阅读(1506)  评论(0)  编辑  收藏  举报

导航

Fork me on GitHub