为什么要清除浮动?清除浮动的方式

news2024/11/15 6:56:09

📝个人主页:爱吃炫迈
💌系列专栏:HTML+CSS
🧑‍💻座右铭:道阻且长,行则将至💗

文章目录

  • 浮动的定义
  • 浮动的工作原理
  • 浮动的特性
  • 为什么要清除浮动
  • 清除浮动的方式
    • 利用clear样式
    • 父元素结束标签之前插入清除浮动的块级元素
    • 利用伪元素(clearfix)
    • BFC清除浮动


浮动的定义

非IE浏览器下,容器不设高度且子元素浮动时,容器高度不能被内容撑开。此时,内容会溢出到容器外面影响布局。这种现象被称为浮动(溢出)。

浮动的工作原理

  • 浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象)
  • 浮动元素碰到包含它的边框或者其他浮动元素的边框停留

浮动元素可以左右移动,直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流,当元素浮动后,不会影响块级元素的布局,只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候,此时就会出现“高度塌陷”

浮动的特性

  • 脱离标准文档流
  • 文本环绕
  • 块级元素横排显示
  • 内联元素设置宽高
  • 浮动元素支持 margin,但是不支持 margin: auto
  • 元素没有设置宽度时,宽度为内容撑开宽

为什么要清除浮动

🌰🌰举个栗子

<div class="topDiv">
    <div class="floatDiv">float left</div>
    <div class="textDiv">text</div>
</div>
<div class="bottomDiv">bottom</div>
.topDiv {
    width: 500px;
    border: 2px solid black;
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 2px dotted red;
    color: red;
    margin: 4px;
    float: left;
}
.bottomDiv {
    width: 500px;
    height: 100px;
    margin: 5px 0;
    border: 2px dotted black;
}
.textDiv {
    color: blue;
    border: 2px solid blue;
}

渲染效果如下
在这里插入图片描述
这肯定不是我们想要的渲染效果,它可能存在如下问题:

  1. 文字围绕浮动元素排版,但我们可能希望文字(.textDiv)排列在浮动元素下方,或者,我们并不希望.textDiv两边有浮动元素存在。
  2. 浮动元素排版超出了其父级元素(.topDiv),父元素的高度出现了塌缩,若没有文字高度的支撑,不考虑边框,父级元素高度会塌缩成零。
  3. 浮动元素甚至影响到了其父元素的兄弟元素(.bottomDiv)排版。因为浮动元素脱离了文档流,.bottomDiv在计算元素位置的时候会忽略其影响,紧接着上一个元素的位置继续排列。

✨需要解决的问题:

  1. 需要清除.textDiv周围的浮动
  2. 因为父元素的兄弟元素位置只受父元素位置的影响,就需要一种方法将父级元素的高度撑起来,将浮动元素包裹在其中,避免浮动元素影响父元素外部的元素排列

清除浮动的方式

利用clear样式

利用clear: both来清除浮动,首先clear就是清除的意思,both代表左浮动和右浮动都清除掉。通俗一点来讲,就是说清除别人对我的影响。


关于clear

描述
left在左侧不允许浮动元素
right在右侧不允许浮动元素
both在左右两侧不允许浮动元素
none默认值,允许浮动元素出现在两侧
inherit规定应从父元素继承clear属性的值

我们尝试对上面例子进行如下修改:

//省略基本样式
.textDiv {
    color: blue;
    border: 2px solid blue;
    //区别在这
    clear: left;
}

在这里插入图片描述
解释一下
通过上面的样式,.textDiv告诉浏览器,我的左边不允许有浮动的元素存在,请清除掉我左边的浮动元素。然而,因为浮动元素(.floatDiv)位置已经确定,浏览器在计算.textDiv的位置时,为满足其需求,将.textDiv渲染在浮动元素下方,保证了.textDiv左边没有浮动元素。同时可以看出,父元素的高度也被撑起来了,其兄弟元素的渲染也不再受到浮动的影响,这是因为.textDiv仍然在文档流中,它必须在父元素的边界内,父元素只有增加其高度才能达到此目的。(clear的值为both也有相同的效果,通俗理解就是,哪边不允许有浮动元素,clear就是对应方向的值,两边都不允许就是both)


如果我们把HTML中的.floatDiv和.textDiv交换一下位置呢?

<div class="topDiv">
    <div class="textDiv">text</div>
    <div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">bottom</div>

在这里插入图片描述
解释一下
.textDiv的位置先确定了,于是浮动元素就紧接着.textDiv下方渲染在父元素的左侧。然而,父元素的高度并没有被撑起来,没有将浮动影响“内化”,导致浮动影响到了接下来的元素排版。看来,为达到撑起父元素高度的目的,使用clear清除浮动的方法还是有适用范围的。我们需要更加通用和可靠的方法。


父元素结束标签之前插入清除浮动的块级元素

HTML结构如下,在有浮动的父级元素的末尾插入了一个没有内容的块级元素div

   <div class="topDiv">
     <div class="textDiv">text</div>
     <div class="floatDiv">float left</div>
     <div class="blankDiv"></div>
 </div>
 <div class="bottomDiv">bottom</div>

给HTML添加CSS样式:

// 省略基本样式
// 区别在这里
.blankDiv {
    clear: both; // or left
}

在这里插入图片描述
原理和第一个例子里.textDiv应用clear清除浮动,撑起父级元素高度的原理完全一样。这里强调一点,即在父级元素末尾添加的元素必须是一个块级元素,否则无法撑起父级元素高度


利用伪元素(clearfix)

HTML结构如下,为了惯例相符,在.topDiv的div上再添加一个clearfix类

  <div class="topDiv clearfix">
    <div class="textDiv">text</div>
    <div class="floatDiv">float left</div>
  </div>
  <div class="bottomDiv">bottom</div>

给HTML添加CSS样式:

// 省略基本样式
.clearfix:after {
    content: '.';
    height: 0;
    display: block;
    clear: both;
}

在这里插入图片描述
解释一下
该样式在clearfix,即父级元素的最后,添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的。注意到该伪元素的display值为block,即,它是一个不可见的块级元素(有的地方使用table,因为table也是一个块级元素)。
你可能已经意识到,这也只不过是前一种清除浮动方法(添加空白div)的另一种变形,其底层逻辑也是完全一样的。前面的三种方法,其本质上是一样的。


BFC清除浮动

BFC全称是块状格式化上下文(Block Formatting Context),那为什么我们可以通过BFC来清除浮动呢?

✨我们首先来看BFC的特征:

  • BFC容器是一个隔离的容器,和其他元素互不干扰;所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
  • BFC可以包含浮动;通常用来解决浮动父元素高度坍塌的问题。
  • BFC能够清除浮动主要就是因为其“包含浮动“这条特性。那我们怎么才能触发BFC呢?

✨我们可以通过添加如下属性来触发BFC:

  • 根元素,即HTML标签
  • float 设为 leftright
  • overflow 设为 hiddenautoscroll
  • display 设为 table-celltable-captioninline-blockflexinline-flex
  • position 设为 absolute fixed

因此我们可以通过给父元素添加 overflow: auto 来实现BFC清除浮动:
HTML结构

 <div class="topDiv">
   <div class="floatDiv">float left</div>
   <div class="textDiv">text</div>
 </div>
 <div class="bottomDiv">bottom</div>

给HTML添加CSS样式

//省略基本样式
.topDiv {
    width: 500px;
    border: 2px solid black;
    //区别在这
    overflow: auto;
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/467359.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue3 vite typescript volar element-plus element标签报红问题的解决

故障就这样的&#xff1a; 模块 ""element-plus"" 没有导出的成员 "FormInstance" 至于原因咱也不知道&#xff0c;也没搞明白&#xff0c;一直以为是volar校验的问题&#xff0c;能开发咱就接着干&#xff0c;到了发布的时候傻眼了。所有这种…

API低代码平台介绍1-功能概述

API低代码平台之ADI平台 ADI平台是指Application data integration&#xff0c;即“应用数据集成”&#xff0c;使用springboot开发&#xff0c;并通过springcloud实现微服务&#xff0c;是一个动态定义Http API接口的“零代码”或“低代码”平台&#xff0c;支持GET(查)、POST…

Java 实现 YoloV7 人体姿态识别

1 OpenCV 环境的准备 这个项目中需要用到 opencv 进行图片的读取与处理操作&#xff0c;因此我们需要先配置一下 opencv 在 java 中运行的配置。 首先前往 opencv 官网下载 opencv-4.6 &#xff1a;点此下载&#xff1b;下载好后仅选择路径后即可完成安装。 此时将 opencv\b…

30基于非对称纳什谈判的多微网电能共享运行优化策略MATLAB程序

资源地址&#xff1a; 30基于非对称纳什谈判的多微网电能共享运行优化策略MATLAB程序资源-CSDN文库 参考文献&#xff1a; 《基于非对称纳什谈判的多微网电能共享运行优化策略》——吴锦领 仿真平台&#xff1a;MATLAB CPLEXMOSEK/IPOPT 主要内容&#xff1a; 主要做的是…

优思学院|精益生产为企业带来革命性转变的效益

企业的成长和发展需要不断的变革和创新&#xff0c;而精益生产则成为了这个时代的代名词。精益生产不仅仅是一个生产方式&#xff0c;更是一种革命性的转变&#xff0c;为企业带来了无限的效益。 什么是精益生产&#xff1f; 精益生产是一种基于持续改进的生产方式&#xff0…

基于matlab的混合波束成形仿真

一、前言 本示例介绍了混合波束成形的基本概念&#xff0c;并展示了如何仿真此类系统。 二、介绍 现代无线通信系统使用空间复用来提高散射体丰富的环境中系统内的数据吞吐量。为了通过通道发送多个数据流&#xff0c;从通道矩阵中导出一组预编码和组合权重。然后&#xff0c;可…

lammps教程:聚合物压缩,避免“bond atoms missing”

本文介绍聚合物的压缩方法。 lammps模拟聚合物体系时&#xff0c;最常见的一个错误是“bond atoms missing”,其中一个原因是建模方法不对。 这个原理在之前的专栏文章中已经详细介绍。 如果使用ms建模&#xff0c;聚合物的链会伸出到盒子外面&#xff0c;在导出data文件后&…

MindFusion.Diagramming for WinForms 6.8.6

您现在可以指定在修改项目时要显示的视觉效果。 2023 年 4 月 26 日 - 15:55新版本 特征 您现在可以指定在修改项目时要显示的视觉效果。新的 Opacity 属性允许您创建半透明的 DiagramItem。添加了新的 CopySelection 重载&#xff0c;它允许您复制项目列表而无需选择它们。您现…

OrbStack

OrbStack 是一个可以在 macOS 上快速运行 Docker 容器&#xff0c;和 Linux 虚拟机的工具&#xff0c;资源占用率低&#xff0c;高效&#xff0c;快速。 macOS 上的 Parallels Desktop 和 Docker Desktop 一直是饱受诟病&#xff0c;慢、重、资源消耗巨大。OrbStack 的出现就是…

goroutine和channel

进程与线程 进程就是程序执行在操作系统中的一次在执行过程&#xff0c;是系统进行资源分配的基本单位。 线程就是进程的一个执行实例&#xff0c;是程序的最小执行单元&#xff0c;是比进程更小的独立运行的单位。 一个进程可以创建多个线程&#xff0c;同一一个进程中的多…

如何在C中动态分配二维数组

在C语言中如何动态申请连续的二维数组。可以采用多申请一些指针&#xff0c;然后这一些指针分别指向后面数据区中对应的位置&#xff0c;如一个3*4的int类型数组&#xff0c;我们先申请大小为sizeof(int*) * 3 3 * 4 * sizeof(int)的一维数组设为arr。然后arr[0]存放指向arr …

OpenAirInterface通过docker build方式构建images

本文主要讲解如何通过build方式构建各个网元的image&#xff0c;因为直接pull的image无法对其进行更改&#xff0c;而build的镜像可以对其源代码进行编辑更改后生成镜像。 参考链接&#xff1a;OAI build iamges 1.获取正确的网络功能分支 此存储库仅包含教程和持续集成脚本…

有假币与求正数数组的最小不可组成和

一、编程题 1.有假币 链接&#xff1a;有假币__牛客网 (nowcoder.com) 居然有假币&#xff01; 现在猪肉涨了&#xff0c;但是农民的工资却不见涨啊&#xff0c;没钱怎么买猪肉啊。nowcoder这就去买猪肉&#xff0c;结果找来的零钱中有假币&#xff01;&#xff01;&#xff…

爪哇项目maven项目的打包方式

大家好 ~ 前言 现在都是使用idea中maven插件来打包项目&#xff0c;出现了很多问题很多类或者方法、依赖没有打入到包中&#xff0c;发生了很多问题&#xff0c;因此此文章将基于idea中的maven插件打包。 概念 打包分为小包和大包两种概念&#xff1a; 小包&#xff1a;只打…

Conda虚拟环境的复制和迁移

Conda虚拟环境的复制和迁移 在本机复制Conda虚拟环境 conda create --name snapshot --clone myenv相同操作系统之间复制环境 方法一&#xff1a;requirements.txt 这个方法不推荐&#xff0c;因为只会导出你使用pip安装的依赖包&#xff0c;不会导出虚拟环境所依赖的包&am…

SQL应用题分析

SQL应用题的一般考点&#xff1a; 基本表的查询&#xff08;单表、多表、嵌入、分组、排序&#xff09;、向表中插入数据、更新数据、建立视图 关系代数替换sql&#xff0c;使用关系代数来进行查询 基本上就这几点 SQL基本表的插入、更新和建立视图都是死板的&#xff0c;只…

前端开发:CSS中@import指令详解

前言 在前端开发过程中&#xff0c;关于CSS的使用也是非常的&#xff0c;尤其是样式相关的设置等操作。作为前端开发者关于import指令都会有所了解&#xff0c;尤其是在导入CSS样式的时候会用到&#xff0c;但是刚入行不久的前端开发者对应import指令会有所陌生。那么本文就来分…

项目管理:我该怎么安排下属的工作

在刚开始做项目经理的时候&#xff0c;分配任务时会局限于这样的心理&#xff1a;以前我们都是平级的同事&#xff0c;现在我比他们高一个级别了&#xff0c;我说的话他们会不会听啊。 在这个阶段&#xff0c;大部分项目经理都缺乏自信&#xff0c;觉得在项目成员心中威望不足…

Linux shell编程 条件语句if case

条件测试 test命令 测试表达式是否成立&#xff0c;若成立返回0&#xff0c;否则返回其他数值 格式1: test 条件表达式 格式2: [ 条件表达式 ]文件测试 [ 操作符 文件或者目录 ][ -e 1.txt ]#查看1.txt是否存在&#xff0c;存在返回0 echo $? #查看是上一步命令执行结果 0成…

15天学习MySQL计划-存储过程变量判断循环游标函数触发器(进阶篇)-第九天

15天学习MySQL计划-存储过程/变量/判断/循环/游标/函数/触发器&#xff08;进阶篇&#xff09;-第九天 存储过程 1.介绍 ​ 存储过程是事先经过编译并存储是数据库中的一段SQL语句的集合&#xff0c;调用存储过程可以简化应用开发人员的很多工作&#xff0c;减少数据在数据库…