`

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;
}



分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics