欢迎光临
我的个人博客网站

BFC规则以及解决方法

一、什么是BFC?

BFC是页面上的独立渲染区域

 

二、BFC产生规则

1、根标签(body)

2、float的值不为none

3、overflow的值不为visible

4、display的值为inline-block

5、position的值为absolute或fixed

 

三、BFC的特性

1、垂直方向排列。(类似块级特性)

2、BFC内部每个内部标签都会与左边界相接触。(类似块级特性)

3、属于同一个BFC的两个块元素,垂直margin兄弟关系会折叠(正数以大值为准,有负数正常加减),父子关系会塌陷。

4、BFC区域不会与float的标签区域重叠。

5、浮动的标签也会被计算BFC高度。

6、BFC是独立容器,内部标签不会影响到外部标签。

 

四、可以解决的问题

1、外边距折叠/塌陷:

  父子关系在父级加overflow:hidden,兄弟关系给其中一个兄弟设置成独立的BFC。

2、自适应两栏或三栏布局

  两栏:左边固定高度设置float,右边不设宽设置BFC

BFC规则以及解决方法BFC规则以及解决方法

<html> <head>     <style>         .left {             width: 100px;             height: 400px;             background: red;             float: left;         }         .right {             height: 500px;             background: yellow;             overflow: hidden;         }     </style> </head> <body>     <div class="left"></div>     <div class="right"></div> </body> </html>

两栏自适应

  三栏:左右固定高度设置float,中间不设宽设置BFC

BFC规则以及解决方法BFC规则以及解决方法

<html> <head>     <style>         .left {             float: left;             height: 500px;             width: 150px;             background: red;         }         .center {             height: 600px;             background: blue;             overflow: hidden;         }         .right {             float: right;             height: 500px;             width: 150px;             background: yellow;         }     </style> </head> <body>     <div class="left"></div>     <div class="center"></div>     <div class="mid"></div> </body> </html>

三栏自适应

3、防止文字环绕

  给文字设置成BFC可以解决文字环绕

4、清除浮动

  给父级设置成BFC可以清除浮动,⑤浮动的标签也会被计算BFC高度。

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » BFC规则以及解决方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏