bfc是什么_清除浮动和 BFC

正常情况下，如果我们不给一个元素设置高度，那么这个元素的高度是由其子元素撑起来的。

//html
<div class="parent"><div class="child1"></div><div class="child2"></div><div class="child3"></div>
</div>//css
.parent{border: 1px solid red;}
.child1{width:100px;height: 100px;background: green;}
.child2{width:200px;height: 100px;background: blue;}
.child3{width:100%;height: 100px;background: grey;}

配色有点丑，主要是让大家印象深刻（逃。。。

但是当我们给其子元素设置浮动后，父元素塌陷成一条缝。

//html
<div class="parent"><div class="child1"></div><div class="child2"></div><div class="child3"></div>
</div>//css
.parent{border: 1px solid red;}
.child1{float: left;width:100px;height: 100px;background: green;}
.child2{float: left;width:200px;height: 100px;background: blue;}
.child3{float: left;width:100%;height: 100px;background: grey;}

这个时候我们需要清除浮动来解决这个问题，主要有以下三种方法：

额外标签法
伪元素法
父级添加 overflow:hidden

1.额外标签法：

//html
<div class="parent"><div class="child1"></div><div class="child2"></div><div class="child3"></div><div class="clearfix"></div>
</div>//css
.parent{border: 1px solid red;}
.child1{float: left;width:100px;height: 100px;background: green;}
.child2{float: left;width:200px;height: 100px;background: blue;}
.child3{float: left;width:100%;height: 100px;background: grey;}
.clearfix{clear:both;}

不过这个方法添加了无意义的标签，语义化差，相比之下更推荐使用伪元素

2.伪元素法

//html
<div class="parent clearfix"><div class="child1"></div><div class="child2"></div><div class="child3"></div>
</div>//css
.parent{border: 1px solid red;}
.child1{float: left;width:100px;height: 100px;background: green;}
.child2{float: left;width:200px;height: 100px;background: blue;}
.child3{float: left;width:100%;height: 100px;background: grey;}
.clearfix:after{content:'';display:block;clear:both;
}
.clearfix{zoom:1;//ie6清除浮动的方法
}

3.父级元素添加 overflow:hidden;

原理是通过触发 BFC，实现清除浮动。(该属性进行超出隐藏时需要计算盒子内所有元素的高度, 所以会隐式清除浮动)

那么什么是 BFC？

块级格式化上下文（BFC）

什么是 FC？

Format context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC即 Block Format Contexts (块级格式化上下文)

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

触发BFC：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC有什么用？

阻止相邻元素的 margin 合并
BFC 可以包含浮动的元素（清除浮动）

bfc是什么_清除浮动和 BFC相关推荐

html浮动代码_清除浮动与 BFC(块级格式化上下文)
BFC(Block Formatting Context)是在解决清除浮动的问题时遇到的. 一.什么是 BFC MDN: 块格式化上下文(Block Formatting Context,BFC) 是 ...
CSS相关知识点：6种清除浮动和BFC
文章目录 CSS相关知识点:6种清除浮动和BFC 一.6种清除浮动 1.场景 2.原因 3.清除浮动 (1).给父级设置对应的高度 (2).给父级增加定位absolute (3).将父级也设计成浮动 ...
bfc是什么_全面分析总结BFC原理及实践
前言经常在面试中被问到"如何清除浮动?"."为什么 overflow: hidden 可以清除浮动?"等等比较基础的问题.虽然这些题目案在各种写面试题的文章中 ...
css清除浮动的几种方法_清除浮动的几种方法
标准流:盒子会各占整行位置.子盒子若是标准流,父盒子虽然没有高度,但是会撑开父盒子高度. 浮动:盒子浮了起来,不会占据原来的位置,若父盒子没有定义高度,则不会撑开父盒子,父盒子高度为0.(浮动可以让 ...
触发bfc的html元素,什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...
清除浮动原理、clear原理、bfc原理
一.clear clear 属性定义了元素的哪边上不允许出现浮动元素.并不是将浮动元素变成了非浮动的,而是将该元素左右的浮动元素放到下一行. left :在左侧不允许浮动元素 right :在右侧不允 ...
清除浮动的五种方法详解
前言: 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容 ...
清除浮动（高度塌陷）的方法及原理！
为什么要清除浮动? (清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题) 1.如下,我给父盒子设置一个boder,内部放两个盒子一个big 一个small,未给big和small ...
CSS清除浮动的几种常见方法
文章目录浮动优点缺点清除浮动一.额外标签法实例二.父级添加overflow属性实例三.使用:after 实例四.使用双伪元素实例五.手动设置父级高度实例注意浮动当元素浮 ...

bfc是什么_清除浮动和 BFC

块级格式化上下文（BFC）

bfc是什么_清除浮动和 BFC相关推荐

最新文章

热门文章