专栏首页杨龙飞前端BFC概念和作用,触发条件

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 网页html结构搭建方法总结

    windseek
  • win8效果的横向布局

    windseek
  • 大屏数据展示之数字滑动动态显示

    接到一个大屏数据的需求,要是实时展示用户数,并且动画效果是翻转显示,折腾了半个多小时,写了一个demo出来,上代码

    windseek
  • 前端基础-CSS缩放zoom

    cwl_java
  • 前端学习(49)~offset相关属性和匀速动画(含轮播图实现)

    offsetWidth 和 offsetHight:获取元素的宽高 + padding + border,不包括margin。如下:

    Vincent-yuan
  • Css学习手册之基本篇

    Css学习手册之基本篇 每次写前端都是一个痛苦的过程,总是静不下来,彻底的研究下前端的技术,导致每次套页面都是直接采用一些封装好的控件,而有时对这些样式不满意时...

    一灰灰blog
  • css 使元素居中

    <div style="text-align:center;">居中显示</div>

    lin_zone
  • box-sizing

            在通常的网页布局都是由一个个div等元素构成盒子形成形形色色的网页结构,在网页的构成中我们还要进行各种元素的修饰,叫做:盒子模型.

    十月梦想
  • 网页html结构搭建方法总结

    windseek
  • 框模型

         元素框的实际宽度:width+左右外边距+左右border边框+左右内边距

    十月梦想

扫码关注云+社区

领取腾讯云代金券