`

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原理及其应用

    CSS BFC(Block Formatting Context,块级格式化上下文)是Web页面布局中的一个重要概念,它定义了一个独立的渲染区域,具有自己特定的布局规则。理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 ...

    bfc的详细介绍以及大总结

    BFC,全称为Block Formatting Context(块级格式化上下文),是CSS中一种特殊的渲染规则,它决定了内部元素如何布局以及与其他元素的关系和相互作用。在理解BFC之前,我们需要先了解一些基本的概念: - **Block-...

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

    BFC(Block Formatting Context,块级格式化上下文)是CSS布局中的一个重要概念,对于理解和解决网页布局问题有着至关重要的作用。本篇将深入探讨BFC规范,帮助初学者从入门到精通。 BFC全称为Block Formatting ...

    CSS 清除浮动与BFC的方法

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

    诱发BFC的原因及处理方案

    【CSS定位方案与Block Formatting Contexts (BFC)详解】 在网页设计中,CSS布局扮演着至关重要的角色。本文将深入探讨三种常见的定位方案:普通流、浮动和绝对定位,以及与之相关的Block Formatting Contexts (BFC)...

    HTML-bfc初探

    理解BFC可以帮助我们更好地控制网页的布局,解决浮动元素引起的问题,以及实现更精确的定位。 1. **什么是BFC**: BFC是一个独立的渲染区域,每个元素都会创建自己的BFC,内部的元素会按照一定的规则进行排列,...

    浅析CSS里的BFC和IFC的用法

    CSS中的BFC和IFC是布局中的两个重要概念。它们分别代表块级格式化上下文(Block Formatting Context)和内联格式化上下文(Inline Formatting Context)。理解这两种格式化上下文对于解决CSS布局中的一些问题至关重要。 ...

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

    在Web前端开发中,HTML和CSS是构建网页的基石,而BFC(Block Formatting Context,块格式化上下文)则是CSS布局中一个至关重要的概念。本篇将深入探讨BFC规范,帮助初学者从入门到精通,理解并掌握这一关键知识点。 ...

    CSS布局基础BFC

    BFC在布局中的应用除了解决浮动元素导致的父元素高度塌陷,BFC还用于解决其他布局问题,例如创建自适应两列布局。传统的两列布局通常依赖于浮动,但这种方式可能导致父元素高度计算错误。通过将一边的列设置为BFC,...

    Web布局中BFC(块级格式化上下文)的应用与解决方案

    文中提及了常见的触发BFC的方法及其应用场景比如阻止浮动导致的父元素高度丢失或者元素遮盖等问题的具体操作。 适合人群:面向所有web开发初学者到高级工程师,尤其对于正在探索浏览器如何渲染CSS布局的学习者来说是...

    浅谈CSS潜藏着的BFC

    BFC(Block Formatting Context)是CSS中的一个重要的概念,它是Web页面的可视...掌握BFC的概念和应用,对于CSS布局和样式的调整来说是非常有益的。在实际开发中,合理地使用BFC,可以提高页面的布局质量和开发效率。

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

    【CSS理解块级格式上下文(BFC)】 ...总之,理解并掌握BFC的概念和应用场景对于优化CSS布局和解决布局问题具有重要意义。在实际开发中,BFC可以帮助我们有效地控制元素的排列和间距,提高布局的可预测性和稳定性。

    完美网页设计-CSS

    针对不同浏览器的差异进行调试和修复,如使用autoprefixer处理 vendor prefixes,了解BFC(块格式化上下文)以解决布局问题。 10. **CSS框架和库** 如Bootstrap、Foundation等,提供现成的样式、组件和布局,加速...

    Quick BFC bat生成exe工具

    Quick BFC(Basic File Compiler)是一款实用的工具,主要用于将批处理文件(.bat)转换为可执行文件(.exe)。这个过程对于那些希望保护批处理脚本内容、提高脚本执行效率或使得非技术用户能够更方便地运行脚本的人...

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

    在实际应用中,根据具体情况选择合适的方法来处理BFC布局引发的外层div包裹内层div的问题。在创建BFC时,应考虑不同属性可能带来的副作用,选择最适合当前布局需求的样式。通过清除浮动或创建新的BFC,可以有效地...

    BFC 正则表达式测试工具

    **正则表达式(Regular Expression)**是一种强大的文本处理工具,...总的来说,BFC正则表达式测试工具是一个实用的辅助工具,无论是初学者还是经验丰富的开发者,都能从中受益,提升对正则表达式的理解和应用能力。

    BFC的布局规则.docx

    **BFC(Block Formatting Context)**是Web布局中的一个重要概念,它定义了元素内部块级元素如何排列,并且与外部环境隔绝。了解BFC的布局规则对于优化页面布局...在CSS布局设计中,掌握BFC的概念和应用是至关重要的。

Global site tag (gtag.js) - Google Analytics