码迷,mamicode.com
首页 > 其他好文 > 详细

从零开始学习前端开发 — 18、BFC

时间:2018-01-12 22:42:12      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:form   font   前端   scroll   开始   解决   塌陷   前端开发   如何   

一、 BFC的概念

BFC——block formating context的缩写,中文译为"块级格式化上下文"

二、如何触发BFC

1.设置float除none以外的值(left,right)

2.设置overflow除visible以外的值(hidden,auto,scroll)

3.设置display属性(table,table-cell,inline-block,flex)

4.设置position属性(fixed,absolute)

三、BFC的作用

1.可以解决上下margin重叠问题

可以给其中一个元素在外层嵌套一个父容器,并设置overflow:hidden;这样为里面的元素创建了一个块级格式化上下文

2.可以解决高度塌陷问题

父元素高度自适应,子元素浮动脱离文档流,不占据父元素空间,导致父元素高度为0,此时给父元素设置overflow:hidden,闭合浮动,触发了BFC

3.可以实现多栏布局

两个浮动元素相邻,另外一个元素设置overflow:hidden;触发了BFC

从零开始学习前端开发 — 18、BFC

标签:form   font   前端   scroll   开始   解决   塌陷   前端开发   如何   

原文地址:https://www.cnblogs.com/witkeydu/p/8277779.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!