什么是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盒模型

    CSS盒模型(Box Model)是CSS网页布局的核心内容之一。了解盒模型的概念及其应用,可以帮助我们更好地实现网页布局。 盒模型由四个部分组成:Content(内容)、Padding(内边距)、Border(边框)和Margin(外边距)。其中Content为盒子的实际内容部分,Padding为盒子边缘到内容之间的距离,Border为盒子边框的样式、颜色…

    css 2023年6月9日
    00
  • css3实现wifi信号逐渐增强效果实例

    下面我将为大家详细讲解“CSS3实现WiFi信号逐渐增强效果实例”的完整攻略。 首先,我们要了解到本次实例的主要思路,即利用CSS3的动画效果,实现WiFi信号逐渐增强的动态效果。接下来,我们可以根据以下步骤来实现这个效果。 1. 编写HTML结构 首先,我们需要先编写基础的HTML结构。这里我们假设WiFi信号区域是一个div容器,内部还包含三个div元素…

    css 2023年6月10日
    00
  • Vue+Canvas制作简易的水印添加器小工具

    下面是Vue+Canvas制作简易的水印添加器小工具的攻略。 一、准备工作 首先需要安装Vue,创建一个Vue项目并安装好必要的依赖包,安装Canvas支持库。 # 创建项目 vue create watermark-tool # 进入项目目录 cd watermark-tool # 安装Canvas支持库 npm install canvas –save…

    css 2023年6月10日
    00
  • CSS display:block在Firefox下显示布局错乱问题

    问题描述: 在Firefox下,使用CSS display:block属性设定元素为块状元素时,有时候会出现布局错乱问题。这个问题主要会出现在交互式元素、定位元素以及浮动元素上。 解决方案: 解决这个问题的方法是手动设置元素的宽度或者使用overflow:hidden属性。 方法一:手动设置宽度 如果一个块状元素没有设置宽度,那么Firefox会按照默认宽度…

    css 2023年6月10日
    00
  • Dreamweaver怎么设计网站的demo原型?

    Dreamweaver是一款非常优秀的网站开发工具,在设计网站的demo原型时,可以通过以下步骤进行: 1. 创建新网站 首先打开Dreamweaver,点击菜单栏中的“文件(File)”>“新建(New)”>“网站(Site)”,然后按照提示输入网站名称和保存位置等信息。成功创建网站后,Dreamweaver会自动进入代码编辑页面。 2. 设计…

    css 2023年6月11日
    00
  • bootstrap多层模态框滚动条消失的问题

    让我为你详细讲解“bootstrap多层模态框滚动条消失的问题”的完整攻略。 问题描述 在使用Bootstrap框架开发多层模态框时,可能会遇到滚动条消失的问题。当打开第一个模态框时,滚动条正常显示,但是当在第一个模态框中打开第二个模态框时,滚动条就会消失,导致用户无法向下滚动页面。 解决方法 1. 自定义CSS 我们可以自定义一些CSS样式来解决这个问题。…

    css 2023年6月10日
    00
  • 浅谈css命名规则(新手必看)

    下面是 “浅谈css命名规则(新手必看)” 的完整攻略: 1. 命名规则的重要性 在编写 CSS 样式表时,命名规则是非常重要的。良好的命名规范能够提高代码的可读性和可维护性,帮助开发人员更轻松地理解代码的功能和结构,以及在修改和维护代码时更加高效。 因此,使用合适的 CSS 命名规则是非常重要的,它可以使你的代码更易于理解和维护,也可以让团队开发更顺畅。 …

    css 2023年6月10日
    00
  • javascript五图轮播切换实用版

    首先,本文将介绍如何使用JavaScript实现一个基础的轮播切换功能。本文所使用的代码可以在此Github仓库中查看。 第一步:HTML结构 首先,在HTML中,我们需要一个容器元素,和需要轮播展示的图片元素。以下是一份示例代码: <div class="carousel-container"> <img src=&q…

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