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

BFC块级格式上下文

时间:2016-09-18 01:11:10      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:

BFC块级格式上下文,独立的一个渲染区域

1、同一个BFC的两个相邻盒子间的margin会重叠(垂直方向);

2、BFC内部的盒子在垂直方向上会一个接一个的放置;

3、每个子元素的左外边距与包含块的左边界相接触;

4、计算BFC的高度时,浮动子元素也参与计算;

5、BFC内部的子元素不会受到外面元素的影响;

6、BFC的区域不会与float的元素区域重叠;

 

触发BFC条件:

float:不为none;

overflow的值不为visible;

display:inline-block,table-cell,table-caption;

position:不为relative 和 static

 

哪些元素会产生BFC

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

 如果一个浮动元素后面紧跟一个非浮动的元素,那么就会有一个覆盖的对象,这时可对后面非浮动元素设置overflow:hidden触发BFC,或者设置padding-left:浮动元素的宽度

BFC块级格式上下文

标签:

原文地址:http://www.cnblogs.com/qiye2016/p/5880121.html

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