02BFC与清除浮动

最新推荐文章于 2024-12-11 13:50:57 发布

_wayliu

最新推荐文章于 2024-12-11 13:50:57 发布

阅读量102

点赞数

分类专栏： CSS前端知识点汇总及面试题

本文链接：https://blog.youkuaiyun.com/weixin_44499465/article/details/115221015

版权

CSS前端知识点汇总及面试题专栏收录该内容

5 篇文章

订阅专栏

1.什么是BFC

即“块级格式化”上下文，是一个独立地布局环境，其中的元素布局不受外界的影响，并且在一个BFC中，块盒盒行盒都会垂直地沿着父元素地边框排列。

2.BFC的布局规则

内部的盒子会在垂直方向，一个接一个放置。
盒子垂直方向的距离由margin决定，同一个BFC的两个相邻盒子的margin会发生重叠
BFC的区域不会和 float 的盒子重叠。
计算BFC的高度时，浮动元素也参与计算。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div {
			color: red;
			background: yellow;
			width: 200px;
			height: 100px;
			margin: 30px;
		}
	</style>
	<body>
		<div>123</div>
		<div>456</div>
	</body>
</html>

在这里插入图片描述
正常应该有1002+302=260的，由于margin合并只有230了。合并的规则是会取最大值。

3.如何触发BFC

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

4.清除浮动的场景？

父级没高度
子盒子浮动了
影响下面布局了，我们就应该清除浮动了。

由于子盒子浮动了，脱离了标准流，父盒子没有高度就为0了，不会被盒子撑开。

5.清除浮动的方式

选择器{clear:属性值;}   clear 清除 left/right/both

overflow: hidden,给父级触发BFC,根据其布局规则其高度算上浮动盒子的。
W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
使用after伪元素清除

 父级:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }

02BFC与 清除浮动

1.什么是BFC

2.BFC的布局规则

3.如何触发BFC

4.清除浮动的场景？

5.清除浮动的方式

02BFC与清除浮动