10分钟了解什么是BFC
2019-05-22 06:30:48来源:博客园 阅读 ()
BFC对于已经是一个耳熟能详的词汇了,而且在前端面试中,这题也是一个高频题。虽然我们平时在开发的时候知道如何利用BFC来解决问题,但是我们要具体说出BFC的概念和怎么触发BFC,我相信很多小伙伴也是和我一样不知道的
什么是BFC?
具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部
怎么触发BFC?
只要元素满足下面任一条件即可触发 BFC 特性:
-
-
绝对定位元素:position为absolute或fixed
-
display为inline-block、table-cell、flex、inline-flex、table-caption
-
overflow除了visible以外的值(hidden、auto、scroll)
- body根元素
BFC的渲染规则
<section id="margin"> <style> #margin{ background:pink; overflow:hidden; } #margin p{ margin:5px auto 25px; background:red; } </style> <p>1</p> <p>2</p> </section>
这其实不是css的bug,我们可以将其理解为是一种规范。如果我们想要避免外边距重叠的话,根据同一个BFC容器下面的元素才会发生折叠的原理,我们可以将他们放在不同的BFC容器中
解决方法:
将发生重叠的盒子放在另外一个BFC容器中,即添加一个父盒子,将该盒子设置为BFC容器
<section id="margin"> <style> #margin{ background:pink; overflow:hidden; } #margin p{ margin:5px auto 25px; background:red; } </style> <p>1</p> <div style="overflow: hidden"> <p>2</p> </div> <p>3</p> </section>
2. BFC可以包含浮动的元素
我们都知道,浮动的元素都会脱离文档流,我们来看一下下面的例子
<section id="layout"> <style> #layout{ background:red; } #layout .left{ float: left; width: 100px; height: 100px; background: pink; } #layout .right{ height: 110px; background: green; } </style> <div class="left"></div> <div class="right"></div> </section>
效果图:
通过这个图我们可以看出,右侧的盒子因为高度比左边的高之后,因为BFC的缘故,就延申到它的左侧去了。这个例子我们做前端的应该是经常遇到的,很多人知道应该怎么解决,但是却不知道它的原理,这是因为BFC的缘故
解决方法:
给右侧的盒子设置为BFC容器,添加overflow属性,注意overflow不能为visible
<section id="layout"> <style> #layout{ background:red; } #layout .left{ float: left; width: 100px; height: 100px; background: pink; } #layout .right{ height: 110px; background: green; overflow: auto; } </style> <div class="left"></div> <div class="right"></div> </section>
3.计算BFC高度时,浮动元素也参与计算
下面我给大家举一个非常常见的例子:
<section id="float"> <style> #float { background: red; } #float .float { float: left; font-size: 30px; } </style> <div class="float">我是浮动元素</div> </section>
相信大家在开发的时候肯定有遇到过这个,子元素浮动之后,子元素的高度没有算到父元素上面,导致父元素的高度为0
解决方法:
给父元素设置为BFC,添加overflow:hidden属性
<section id="float"> <style> #float { background: red; overflow: hidden; } #float .float { float: left; font-size: 30px; } </style> <div class="float">我是浮动元素</div> </section>
4 . BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此
例子在2,3里面有体现
原文链接:https://www.cnblogs.com/cythia/p/10896370.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 毕业生想学习web前端开发,有什么好的发展方向吗? 2020-06-09
- 2020年Web前端开发工程师市场怎么样?学会什么技术才能拿到 2020-06-06
- 要学习什么知识为了成为一名前端工程师? 2020-06-03
- 现在前端最主要的都学什么? 2020-06-01
- CSS Grid 布局 2020-06-01
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash