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

理解BFC

时间:2018-03-27 01:58:47      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:cell   blog   none   isp   pos   flex   float   100%   position   

1、BFC 块级格式化上下文 

  具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。

2、满足一下条件即可触发BFC

  body 根元素

  浮动元素:float 除 none 以外的值

  绝对定位元素:position (absolute、fixed)

  display 为 inline-block、table-cells、flex

  overflow 除了 visible 以外的值 (hidden、auto、scroll)

3、常见的使用

 <div style="width:100%;">

  <div style="height:100px;width:100px;float:left;"></div>
  <div style="height:100px;overflow:hidden;"></div>
 </div>

理解BFC

标签:cell   blog   none   isp   pos   flex   float   100%   position   

原文地址:https://www.cnblogs.com/-tao/p/8654713.html

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