`

css BFC粗浅应用

 
阅读更多

在网上搜CSS BFC,很多专业的帖子,本文只说下最简单的应用

在布局的时候,有时候absolute是很方便的,比如要制造某元素离底部10px的效果,用absolute定位可能是最简单的方式。而absolute布局,就涉及到BFC的概念

首先为一个元素设置样式:

position: absolute;
bottom: 0;

就会设置此元素紧贴它的BFC的底部。在没有创建任何新BFC的情况下,body就是整个文档唯一的BFC,所以此元素就会贴住body的底部

对于下面的结构:

<div id="wrapper">
    <div id="content">
    </div>
</div>

如果希望content贴住wrapper的底部,就需要把wrapper设置成BFC。把wrapper设置成BFC的方法,最简单的办法是设置为relative

#wrapper {
    position: relative;
}

#content {
    position: absolute;
    bottom: 0;
}



分享到:
评论

相关推荐

    10分钟理解CSS BFC原理及其应用

    主要介绍了10分钟理解BFC原理及其应用的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    CSS 清除浮动与BFC的方法

    BFC BFC:块级格式化上下文 BFC的布局规则 内部的Box会在垂直方向,一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 计算BFC的高度时,浮动元素也参与计算...

    bfc的详细介绍以及大总结

    BFC详细介绍BFC详细介绍

    HTML-bfc初探

    HTML-bfc初探

    CSS布局基础BFC

    但是它的重要性确是杠杠的,可以这么说,没有它就就没有什么css布局 BFC,全称 Block Formatting Context,翻译成块级格式化上下文,它就是一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素...

    浅析CSS里的BFC和IFC的用法

    主要介绍了浅析CSS里的BFC和IFC的用法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    Web-前端html+css从入门到精通 133. BFC规范(下).zip

    Web-前端html+css从入门到精通 133. BFC规范(下).zip

    Web-前端html+css从入门到精通 132. BFC规范(上).zip

    Web-前端html+css从入门到精通 132. BFC规范(上).zip

    css布局之BFC模式(block formatting context)

    详解BFC【 block formatting context】 BFC这个东西说常见的话你可能不觉得,但是你肯定会常用到,也许你在用的时候也没想到BFC这东西。那它究竟是什么呢,我们来一起看一下。 官方给出的BFC解释是这样的,浮动元素...

    前端bfc的介绍与使用

    关于BFC的介绍与使用 这篇文章是我对BFC的理解及总结 带你们了解bfc的布局规则,使用方法,触发条件等内容,理解简单。

    什么是BFC? CSS 使用伪元素清除浮动的方法

    BFC概念:  块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。 我们先了解一个名词:BFC(block formatting context),中文为“块级格式化上...

    诱发BFC的原因及处理方案

    该文档涉及诱发BFC的原因及处理方案.

    CSS理解块级格式上下文(BFC)

    1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box(块级元素)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 通俗...

    CSS使用BFC规则布局引发外层div包裹内层div的处理方法

    BFC情况下人们通常在div中使用float和margin,这会经常出现一些问题,这里就来看一下CSS使用BFC规则布局引发外层div包裹内层div的处理方法,需要的朋友可以参考下.

    前端大厂面试思维导图-css面试

    css常见面试题目,自适应两栏布局避免垂直方向margin合并BFC定义,布局规则,防止高度坍塌,自适应两栏布局,利用css构建三角形(正三角,倒三角,左/右三角),响应式布局的方式,几种,媒体查询原理,flex布局,父...

Global site tag (gtag.js) - Google Analytics