BFC规则以及解决方法

一、什么是BFC?

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

二、BFC产生规则

1、根标签(body)

2、float的值不为none

3、overflow的值不为visible

4、display的值为inline-block

5、positr . (ion的值为absolute或fixed

三、BFC的特性

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

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

3、属于同一个BFC的两个块元素,垂直margp p | 4in兄弟关系会折叠(正数m * c ^以大值为准,有负数正常加减),父D U z ; d 3 T T子关系会塌陷。D d K p u

4、B3 G ; bFC区域不会与float的标签区域重叠。

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

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

四、可以解决的问题

1、外边距折叠/塌陷:

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

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

两栏:左边固定高度设置float,右边不设宽f H 4 1 +设置BFC

&p D q C `lt;htmC k : F U Ml>
<head>
<style&g8 @ ^ 3 it;
.left {
width: 100px;
height: 400px;
background: red;
float:R n * h left;
}
.right {
height: 5P I + = % 0 Y * -00px;
background: yellow;
overflow: hidden;
}
</style>
&N k k O O T } , ;lt;/@ w q W Jhead>
<body>
<div></div>
<div></div>
</body>
</html>g 8 L ? E h 7 S;[ 0 - y r

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

<html>
<head9 / V 5>
<s] ? Dtyle>
.left {
float: left;
heighj ? P . y L Ot: 500px;
width: 150px;
background: red;
}
.centeO } Sr {
height: 600px;
b1 X l ( t [ {ackground: blue;
overflow: hu u G J t 1idden;
}
.right {
float: right;
height:u } o U K 500px;
width: 150px;
background:Z c C } V [ o : yellow;
}
</style>
</head>
<body>
<div></div&z M w 7 d mgt;
<div></div>
<div></div& X p>
</body>
</html>

3、防止文字环绕

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


4、清除浮动

给父级设置成S . % l $ | 8BFC可以清除浮动,E E M O I x i p浮动的标签也Z 7 K会被计算BFC高度。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理A X s @ % i了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: htY r y ^ } s h {tp://www.fly63.com/article/detia$ x j v , p Al/9776