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

相关文章

来自专栏Nian糕的私人厨房

CSS 布局_3 Position元素定位

我们之前已经介绍过行元素,块元素及行内块元素的属性了,能够知道它们是具有自己默认的显示方式的,即元素会按照文档流 (document flow) 的方式,自上而...

934
来自专栏河湾欢儿的专栏

2全屏布局<9>

全屏布局的特点: 1.布局撑满窗口,当浏览器变大的时候,布局也是充满浏览器的窗口 2.滚动条出现在内容区域

561
来自专栏河湾欢儿的专栏

2.布局解决方案- 水平布局<1>

水平布局 写出两个盒子并满足以下条件条件: 1.里面的宽度盒子不固定 2.外面盒子的宽度不固定

803
来自专栏九彩拼盘的叨叨叨

jQuery 选取元素概要

注意: 对于 jQuery 自定义的选择器,为了性能,先用 CSS 定义的选择器选,再从结果集中筛选时用 jQuery 自定义的选择器。如:

632
来自专栏Python

CSS基础

CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 1 2 3 4 5 6 7 8 9 ''' ...

2757
来自专栏企鹅号快讯

前端学习自学笔记:day09

今天是第九天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: ? 第九天的笔记:HTML AND CSS: -复...

1686
来自专栏SHERlocked93的前端小站

CSS margin合并问题

在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折...

623
来自专栏十月梦想

css的position定位详解

iii.  父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白

653
来自专栏Pythonista

css基础

    行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

912
来自专栏柠檬先生

jquery 操作css 尺寸

.height()   获取元素集合中的第一个元素的当前计算高度值,或设置每一个匹配元素的高度值。   .height()     获取匹配元素集...

1689

扫码关注云+社区