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 条评论
登录 后参与评论

相关文章

来自专栏极乐技术社区

wxss学习系列《二》尺寸(Dimension),外边距(margin)和内边距(padding)

尺寸(Dimension) 下班回来了继续看,尺寸:dimension; 一.尺寸属性:允许控制元素的宽和高,还可以设置行间距。 1.height:设置元素的高...

1896
来自专栏前端说吧

Vue-组件嵌套之——父组件向子组件传值

3729
来自专栏前端儿

简单的鼠标可拖动DIV 兼容IE/FF

一个div,注册监听onmousedown事件,然后处理获取的对象及其相关值(对象高度,clientX/clientY位置等)

1271
来自专栏james大数据架构

JQuery实现仿sina新浪微博新鲜事滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...

1897
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第四天 jQuery学习

jQuery是一个JavaScript框架。它兼容CSS3,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多。

1294
来自专栏柠檬先生

VUE 入门基础(7)

八,事件处理器 监听事件   可以用v-on 指令监听DOM 事件来触发一些javaScript     <div id="example-1">   ...

2389
来自专栏nice_每一天

如何编写高效的jQuery代码(转载)

1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大。所以有原生方法可以使用的场合,尽量避免使...

582
来自专栏游戏杂谈

HTML5的data-* 要注意的问题

首先第一个问题,比较简单,直接使用dom.dataset,如果“===”undefined则不支持

972
来自专栏十月梦想

Vue作用域插槽

前面我们说了插槽的内容替代可以使用slot进行,根据不同name的插槽修改内容,但有时候我们希望复用的插槽样式也不近相同要从父组件传递!那么就引入了局部插槽!

3732
来自专栏前端说吧

JS-DOM 综合练习-动态添加删除班级成绩表

3598

扫码关注云+社区