什么是BFC? CSS 使用伪元素清除浮动的方法

BFC(Block Formatting Context,块级格式化上下文)是 CSS 中的一个概念。它是一个独立的渲染区域,拥有自己的渲染规则。在一个 BFC 中,所有的元素按照一定的规则进行排布,这些规则可以帮助我们解决很多常见的页面布局问题。以下是BFC的相关属性和触发方式:

触发BFC的方式

  • 根元素或其他包含它的元素
  • 浮动:float 的值不是 none
  • 绝对定位:position 的值不是 staticrelative
  • 行内块:display 的值变为 inline-block
  • 表格单元格:display 的值变为 table-celltable-captioninline-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属性为blockclear属性为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技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • CSS实例教程:制作网页特殊产品列表

    以下是关于“CSS实例教程:制作网页特殊产品列表”的完整攻略。 步骤一:HTML 结构 首先,需要在 HTML 文件中定义一个列表,每个列表项包含一个图片和一些描述信息。以下是一个示例: <ul class="product-list"> <li> <img src="product1.jpg&qu…

    css 2023年5月18日
    00
  • 使用box-sizing让CSS布局更直观

    使用box-sizing属性可以让CSS布局更直观。在没有使用box-sizing属性时,一个元素的宽度(width)值只包括内容的宽度,而padding、border和margin的宽度值则会在元素的宽度之外进行计算,导致元素的实际宽度要比CSS中定义的宽度值大。使用box-sizing属性可以改变计算宽度的方式,让元素的宽度值可以包括padding和bo…

    css 2023年6月10日
    00
  • chrome开发者工具-timeline的详细介绍

    下面就为大家详细讲解一下chrome开发者工具中的timeline面板。 1. 什么是Timeline Chrome开发者工具中的Timeline(时间线)面板为我们提供了一个时间轴视图,帮助我们分析网页的性能问题。它可以帮助我们找出网站中存在的瓶颈,进行分析和诊断。 2. Timeline的使用方法 要使用timeline面板,首先要打开开发者工具,然后在…

    css 2023年6月10日
    00
  • 需要知道的CSS3动画技术

    需要知道的CSS3动画技术 1. 初识CSS3动画 CSS3动画是指使用CSS3技术实现的动画效果,包括:过渡(Transition)、变形(Transform)和关键帧动画(Animation)。这些动画技术都可以通过CSS的样式控制实现。 1.1 过渡(Transition) 过渡是指让元素在一组CSS属性的值之间平滑的过渡,让过渡看起来更加自然流畅。通…

    css 2023年6月10日
    00
  • PHP详细彻底学习Smarty

    PHP详细彻底学习Smarty 什么是Smarty Smarty 是一个 PHP 模板引擎,它允许我们将业务逻辑与样式相分离。通过 Smarty,我们可以在 HTML 页面中直接嵌入 PHP 代码。 Smarty 的一个主要功能是变量输出,我们可以从 PHP 脚本中向模板中传递变量,以供模板来渲染。此外,Smarty 还支持复杂的逻辑操作,例如 if-els…

    css 2023年6月9日
    00
  • 纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)

    那我来为您详细讲解纯CSS制作各种各样的网页图标的完整攻略。 简介 CSS是一种强大的样式语言,可以用来为网站添加各种复杂和简单的效果,其中包括网页图标。使用CSS制作网页图标的好处是可以减少对图像的依赖,并且减少页面加载时间。这个过程中一般使用伪元素和CSS属性来控制样式。 纯CSS制作三角形 制作三角形可以用CSS的border属性,将三角形看做一个小数…

    css 2023年6月10日
    00
  • jQuery操作CSS样式

    jQuery操作CSS样式攻略 在jQuery中,可以使用以下方法操作CSS样式: 1. .css()方法 .css()方法用于获取或设置一个或多个元素的CSS样式。可以传入一个或两个参数。 第一个参数是一个CSS属性的名称,如果想一次设置多个属性,可以传入一个有多个属性和值的JSON对象。第二个参数是一个可选的布尔值,表示是否使用动画过渡效果。 下面是示例…

    css 2023年6月10日
    00
  • Html页面支持暗黑模式的实现

    关于 “Html页面支持暗黑模式的实现”的完整攻略,可以从以下几个方面进行介绍。 使用CSS Media Query Web 开发者可以使用CSS 媒体查询(Media Query)来实现暗黑模式下的页面样式。在 CSS 中,我们可以使用 Media Query 来该变所有浏览器输出的内容或部分更改样式表中的规则。 CSS 可以通过 prefers-colo…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部