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; }
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
