BFC(Block Formatting Context,块级格式化上下文)是 CSS 中的一个概念。它是一个独立的渲染区域,拥有自己的渲染规则。在一个 BFC 中,所有的元素按照一定的规则进行排布,这些规则可以帮助我们解决很多常见的页面布局问题。以下是BFC的相关属性和触发方式:
触发BFC的方式
- 根元素或其他包含它的元素
- 浮动:
float
的值不是none
- 绝对定位:
position
的值不是static
或relative
- 行内块:
display
的值变为inline-block
- 表格单元格:
display
的值变为table-cell
、table-caption
或inline-table
overflow
的值不是visible
BFC的特性
- 内部的 Box 会在垂直方向,一个接一个地放置
- Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
- 常见的清除浮动现象(父元素因为子元素浮动导致高度坍塌)不再存在,除非是用来达到这种效果的特殊方式
- 不会与浮动元素重叠
- 计算 BFC 的高度时,浮动元素也参与计算
BFC布局方式可以解决很多问题,比如让容器自适应内容的高度,防止margin重叠等。
接下来,我们谈一下使用伪元素清除浮动的方法。但首先我们来看一下什么是浮动。
什么是浮动
浮动是CSS中一种常用的定位方式,本质上就是让元素脱离文档流,并沿着父元素的边缘进行浮动定位。
浮动往往用于实现文本环绕效果或者图片的流动布局,但是由于浮动元素脱离文档流,所以可能引起一些布局上的问题。
我们常用的情况是将两个块级元素并排放置,代码如下:
<div class="container">
<div class="left">1</div>
<div class="right">2</div>
</div>
.left {
float: left;
width: 50%;
height: 100px;
background-color: red;
}
.right {
float: left;
width: 50%;
height: 100px;
background-color: blue;
}
这个时候,你会发现.container
元素的高度为0,页面布局出现问题,这时候我们就需要清除浮动来解决这个问题。
伪元素清除浮动的方式
我们可以使用空的块级元素或者清除浮动的技巧来清除浮动,不过这两种方式都比较繁琐,而且会在文档流中增加一些不必要的标记。
另外,我们还可以使用伪元素来清除浮动,这是一种更为简单、优雅的方式。
代码如下:
.container::after {
content: "";
display: block;
clear: both;
}
我们在.container
元素的后面添加一个伪元素::after
,并设置其content
属性为空、display
属性为block
,clear
属性为both
,这样就可以清除.container
元素的浮动了。
除主流浏览器都支持伪元素,有些古老的浏览器可能会有问题,不过并不影响这种方式的使用。
下面提供一个较为完整的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC and Clearfix</title>
<style>
.container {
background: #f5f5f5;
}
.left {
width: 50%;
height: 100px;
background-color: red;
float: left;
}
.right {
width: 50%;
height: 100px;
background-color: blue;
float: left;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="left">1</div>
<div class="right">2</div>
</div>
</body>
</html>
我们给.container
元素添加了.clearfix
和.container
两个class,.clearfix
用于添加::after
伪元素来清除浮动,.container
用于添加背景颜色。
在实际使用中,我们只需要将需要清除浮动的元素的父元素添加一个.clearfix
的类即可。
除此之外,我们还可以使用BFC来清除浮动,这种方式更为常用。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:什么是BFC? CSS 使用伪元素清除浮动的方法 - Python技术站