当前位置： 首页 > news >正文

清除浮动的方法

news 文章来源：https://blog.csdn.net/Yyds12300/article/details/133612315 2025/1/23 14:57:31

为什么需要清除浮动？

  • 父级的盒子不能把height定死这样，浮动子类就没有了（行内块元素的特点），父类高度为零。故引用清除浮动

  • 1、父级没有高度

  • 2、子盒子浮动了

  • 3、影响下面的布局了，我们就应该清除浮动了

  • 语法：

  • 选择器{clear:属性值}

  • 属性值 left 不允许左侧有浮动元素（清除左侧浮动的影响）

  • 属性值 right不允许右侧有浮动元素（清除右侧浮动的影响）

  • both (同时清除左右两侧浮动的影响)

    <style>
.clearfix:after {content: "";height: 0;clear: both;visibility: hidden;
}
.clearfix {*zoom: 1;//这个是照顾IE6、7浏览器所用
}
<style>
<body>
<div class="box clearfix"><div>
</body>

  • 给最后一个盒子后面添加一个盒子，并给盒子clear: both；必须是块级元素，不能是行内元素

  • 方法二父级添加overflow属性属性值 hidden 、auto 、scroll

  • 方法三伪元素

  • <style>
.clearfix:after {content: "";height: 0;clear: both;visibility: hidden;
}
.clearfix {*zoom: 1;//这个是照顾IE6、7浏览器所用
}
<style>
<body>
<div class="box clearfix"><div>
</body>

  • 清除浮动，双伪元素清除浮动

  • <style>
.clearfix:after , .clearfix:before {content: "";display:table;
}
.clearfix {*zoom: 1;//这个是照顾IE6、7浏览器所用
}
.clearfix:after {clear:both;
}
<style>
<body>
<div class="box clearfix"><div>
</body>

    • PS切图

    • jpg图像格式：产品类的图片经常用jpg格式的

    • gif图像格式：实际经常用于一些图片小动画效果

    • png图像格式:如果想要切成背景透明的图片,请选择png格式

    • PSD图像格式PSD,可以直接在上面复制文字，获得图片，还可以测量大小和距离

    • ps的图层导出

    • 1.选出需要的图层：图层菜单->合并图层（ctrl + 3)

    • 右击-> 快速导出为PNG

  • 头部的导航栏在实际的开发中注意：

  • 我们不会直接用链接a而是用li包含链接（li + a)的做法

  • <div><ul><li><a href="">首页</a></li><li><a href="">课程</a></li><li><a href="">职业规划</a></li></ul>
</div>
     
  •  
    当处理字数不一样时，只设置height高不设置witch宽。如下所示
     
  •  
    height: 42px;
padding: 0 10px;
     
  •  
    表单是行内块元素，两者有间隙，需要设置浮动，浮动没有缝隙
     
  •  
    背景可以是background: url(图片地址) no-repeat top center；
     
  •  
    浮动的盒子不会有外边距的问题。也就是父子的盒子不会塌陷下来。
     
  •  
    方框内的文字的水平居中是text-align： center；
     
  •  
    方框内的文字的竖直居中是line-height：height值;
     
  •  
    行高会通过父类传给子类，如果父类定义了行高无需在子类定义
     
  •  
    当要插入10个li的方框时，加入浮动时就可能会因为边框宽不够，导致装不下5个，则需在ul里面设置宽
     














相关文章：
















清除浮动的方法




为什么需要清除浮动&#xff1f; 父级的盒子不能把height定死这样&#xff0c;浮动子类就没有了&#xff08;行内块元素的特点&#xff09;&#xff0c;父类高度为零。故引用清除浮动  1、父级没有高度  2、子盒子浮动了  3、影响下面的布局了&#xff0c;我们就应该清除浮动了…...






编程日记
2023/10/6 16:27:15



















LangChain 摘要 和问答示例




在Azure上的OpenAI端点 注意 OpenAI key 可以用微软 用例【1. 嵌入 &#xff0c;2. 问答】 1. 
import os
import openai
from langchain.embeddings import OpenAIEmbeddings
os.environ["OPENAI_API_KEY"]   "****"  # Azure 的密钥
os.environ["OP…...






编程日记
2023/10/6 16:25:13



















（32）测距仪(声纳、激光雷达、深度摄影机)




文章目录 
前言 
32.1 单向测距仪 
32.2 全向性近距离测距仪 
32.3 基于视觉的传感器 前言 
旋翼飞机/固定翼/无人车支持多种不同的测距仪&#xff0c;包括激光雷达&#xff08;使用激光或红外线光束进行距离测量&#xff09;、360 度激光雷达&#xff08;可探测多个方向的障碍…...






编程日记
2023/10/6 16:24:12



















教你拥有一个自己的QQ机器人！0基础超详细保姆级教学！基于NoneBot2 Windows端搭建QQ机器人




0.序言 
原文链接&#xff1a;教你本地化部署一个QQ机器人本教程主要面向Windows系统用户教程从0开始全程详细指导&#xff0c;0基础萌新请放心食用&#x1f355;如果你遇到了问题&#xff0c;请仔细检查是否哪一步有遗漏。如果你确定自己的操作没问题&#xff0c;可以到原文链…...






编程日记
2023/10/6 16:23:10



















智能银行卡明细筛选与统计，轻松掌握账户总花销！




作为现代生活的重要组成部分&#xff0c;银行卡成为了我们日常消费和收入的主要途径。但是&#xff0c;当我们需要了解自己的银行卡账户的总花销时&#xff0c;繁琐的明细筛选和统计工作常常让人头疼。现在&#xff0c;让我们向您推荐一款智能银行卡明细筛选与统计工具&#xf…...






编程日记
2023/10/6 16:20:07



















SRT服务器SLS




目前互联网上的视频直播有两种&#xff0c;一种是基于RTMP协议的直播&#xff0c;这种直播方式上行推流使用RTMP协议&#xff0c;下行播放使用RTMP&#xff0c;HTTPFLV或者HLS&#xff0c;直播延时一般大于3秒&#xff0c;广泛应用秀场、游戏、赛事和事件直播&#xff0c;满足了…...






编程日记
2023/10/6 16:16:04



















Linux 安装 Android SDK




先安装jdk 
RUN apt-get install default-jdk 参考&#xff1a;http://t.zoukankan.com/braveym-p-6143356.html 
mkdir -p $HOME/install/android-sdk
wget https://dl.google.com/android/repository/commandlinetools-linux-9123335_latest.zip
unzip commandlinetools-linu…...






编程日记
2023/10/6 16:15:03



















【QT开发笔记-基础篇】| 第四章 事件QEvent | 4.4 鼠标按下、移动、释放事件




本章要实现的整体效果如下&#xff1a; QEvent::MouseButtonPress 
​ 鼠标按下时&#xff0c;触发该事件&#xff0c;它对应的子类是 QMouseEvent  
QEvent::MouseMove 
​ 鼠标移动时&#xff0c;触发该事件&#xff0c;它对应的子类是 QMouseEvent  
QEvent::MouseButtonRel…...






编程日记
2023/10/6 16:13:01



















vue3父子通信+ref,toRef,toRefs使用实例




ref是什么? 
生成值类型的响应式数据可用于模板和reactive通过.value修改值可以获取DOM元素 
<p ref”elemRef”>{{nameRef}} -- {{state.name}}</p> 
// 获取dom元素 
onMounted(()>{ console.log(elemRef.value); }); toRef是什么? 
针对一个响应式对象(rea…...






编程日记
2023/10/6 16:11:00



















输入电压转化为电流性 5~20mA方案




输入电压转化为电流性 5~20mA方案 方案一方案二方案三 方案一 
XTR111是一款精密的电压-电流转换器是最广泛应用之一。原因有二&#xff1a;一是线性度非常好、二是价格便宜。总结成一点&#xff0c;就是性价比高。 
典型电路  最终电路  Z1二极管处输出电流表达式&#xff1a;…...






编程日记
2023/10/6 16:09:59



















SpringBoot自带模板引擎Thymeleaf使用详解①




目录 前言 
一、SpringBoot静态资源相关目录 
二、变量输出 
2.1 在templates目录下创建视图index.html 
2.2 创建对应的Controller 
2.3 在视图展示model中的值 
三、操作字符串和时间 
3.1 操作字符串 
3.2 操作时间 前言 Thymeleaf是一款用于渲染XML/HTML5内容的模板引擎&am…...






编程日记
2023/10/6 16:07:57



















推荐算法——Apriori算法原理




0、前言&#xff1a; 
首先名字别读错&#xff1a;an pu ruo ao rui 【拼音发音】Apriori是一种推荐算法推荐系统&#xff1a;从海量数据中&#xff0c;帮助用户进行信息的过滤和选择。主要推荐方法有&#xff1a;基于内容的推荐、协同过滤推荐、基于关联规则的推荐、基于知识的…...






编程日记
2023/10/6 16:05:56



















vue ant 隐藏 列




vue ant 隐藏 列 
如果你使用的是Vue和Ant Design Vue组件库&#xff0c;你可以使用v-if指令来实现条件渲染来隐藏列。以下是一个示例代码&#xff1a; 
<template><a-table :columns"columns" :data-source"data"><template v-slot:custom…...






编程日记
2023/10/6 16:04:55



















java基础之初始化顺序




初始化顺序 在类中变量定义的顺序决定了它们初始化的顺序。在创建任何java对象时&#xff0c;都是依次调用父类非静态初始化块、父类构造器执行初始化、本类的非静态初始化块、本类构造器执行初始化 public class House {    // 构造器之前    Window w1  new Window(1);    Ho…...






编程日记
2023/10/6 16:02:52



















FFmpeg 命令：从入门到精通 | ffmpeg filter（过滤器 / 滤镜）




FFmpeg 命令&#xff1a;从入门到精通 | ffmpeg filter&#xff08;过滤器 / 滤镜&#xff09; FFmpeg 命令&#xff1a;从入门到精通 | ffmpeg filter&#xff08;过滤器 / 滤镜&#xff09;ffmpeg fliter 基本内置变量视频裁剪文字水印图片水印画中画视频多宫格处理 FFmpeg 命…...






编程日记
2023/10/6 16:00:51



















【C语言】23-结构体类型




目录 1. 如何建立结构体类型2. 如何使用结构体2.1 定义结构体变量2.2 结构体变量的初始化和引用2.3 结构体数组2.4 结构体指针2.4.1 指向结构体变量的指针2.4.2 指向结构体数组的指针C 语言提供了一些由系统已定义好的数据类型，如： 
int、 
float、 
char 等，用户可以在程序…...






编程日记
2023/10/6 15:59:50



















Python小技巧：快速合并字典dict()




文章目录 前言知识点字典合并1. dict.update()基础合并2. 字典推导式  update() 后话 前言 这里是Python小技巧的系列文章。这是第四篇&#xff0c;快速合并字典。 在Python的使用中&#xff0c;有时候需要将两个 dict(字典) 进行合并。 通常我们会借助 dict(字典) 的内置方法 …...






编程日记
2023/10/6 15:57:48



















如何使用 React 和 Docusaurus 编写的一些自定义钩子（Hook）




import useRouteContext from @docusaurus/useRouteContext;
import {DependencyList, useEffect, useRef, useState, useMemo } from react;
import {dequal } from dequal;
/* eslint-disable global-require */ // @ts-ignore/*** 用于深度检测依赖的useMemo钩子* @param fa…...






编程日记
2023/10/6 15:56:47



















【初识Linux】Linux环境配置、Linux的基本指令 一




Linux基本指令一 一、学习前提(环境配置&#xff09;①安装Xshell和云服务器推荐②Xshell用途如下图③打开Xshell 二、 Linux基本指令①whoami和who指令②pwd、ls、ls -l三个指令ls指令扩充 ③cd指令前提了解有了上面的认识&#xff0c;我们就可以开始cd指令的学习了 ④tree指令…...






编程日记
2023/10/6 15:55:47



















conda常用命令参数，指定版本，依赖库文件，创建虚拟环境，删除，激活，退出，内部安装包，pip通过代理安装包




以下是conda的常用命令和参数&#xff1a; 
1. 创建虚拟环境&#xff1a;    - 创建一个新的虚拟环境&#xff1a;conda create -n 环境名 pythonx.x    - 使用指定的依赖文件创建虚拟环境&#xff1a;conda create -n 环境名 --file requirements.txt 
2. 激活虚拟环境&#x…...






编程日记
2023/10/6 15:54:46



















【锁的区别】C++线程库和POSIX线程库锁的区别




C线程库和POSIX线程库锁的区别 C线程库代码段的互斥&#xff1a;mutex、recursive_mutex、timed_mutex、recursive_timed_mutex互斥量mutex&#xff1a;直接进行lock()或者unlock()递归互斥锁recursive_mutex&#xff1a;可以多次加锁&#xff0c;意味着加几次锁就需要解几次锁…...






编程日记
2023/10/6 15:52:44



















网络层·IP协议




承接前文TCP协议-CSDN博客 
简介 协议头格式 网段划分(重要) 划分方法 IP地址的数量限制(背景介绍) 私有IP地址和公网IP地址(提出解决思路) NAT技术(解决方法) 路由 网络层 
在复杂的网络环境中确定一个合适的路径   
IP协议 
主机: 配有IP地址, 可以认为就是你的电脑; 路由器:…...






编程日记
2023/10/6 15:50:42



















RabbitMQ学习笔记（下）：延迟队列，发布确认高级，备份交换机




十、延迟队列 
延迟队列 
概念&#xff1a; 延迟队列使用场景&#xff1a; 流程图&#xff1a; 延迟队列整合Springboot 导入依赖&#xff1a; 
<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot…...






编程日记
2023/10/6 15:48:41



















Python 无废话-基础知识面向对象编程详解




类定义 
如何理解万物皆对象&#xff1f; 
生活中一些事物&#xff0c;动物&#xff08;可爱的小狗、调皮的小猫&#xff09;、交通工具&#xff08;比亚迪U8汽车、飞机&#xff09;、人&#xff08;学生、教师&#xff09;…… 
这些对象都有着独特或共性的属性和方法来描述其…...






编程日记
2023/10/6 15:46:39



















凉鞋的 Unity 笔记 106. 第二轮循环场景视图Sprite Renderer




106. 第二轮循环&场景视图&Sprite Renderer 
从这一篇开始&#xff0c;我们开始进行第二轮循环。 
这次我们至少能够在游戏运行窗口看到一些东西。 
首先还是在场景层次窗口进行编辑&#xff0c;先创建一个 Sprite&#xff0c;操作如下: 创建后&#xff0c;会在 Scene …...






编程日记
2023/10/6 15:42:34



















Vue中如何进行分布式路由配置与管理




Vue中的分布式路由配置与管理 
随着现代Web应用程序的复杂性不断增加&#xff0c;分布式路由配置和管理成为了一个重要的主题。Vue.js作为一种流行的前端框架&#xff0c;提供了多种方法来管理Vue应用程序的路由。本文将深入探讨在Vue中如何进行分布式路由配置与管理&#xff0…...






编程日记
2023/10/6 15:41:33



















Solidity 合约漏洞，价值 38BNB 漏洞分析




Solidity 合约漏洞&#xff0c;价值 38BNB 漏洞分析 
1. 漏洞简介 
https://twitter.com/NumenAlert/status/1626447469361102850 https://twitter.com/bbbb/status/1626392605264351235  
2. 相关地址或交易 
攻击交易&#xff1a; https://bscscan.com/tx/0x146586f05a451313…...






编程日记
2023/10/6 15:40:32



















【C++】：类和对象（2）




朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关Linux的基础知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数…...






编程日记
2023/10/6 15:37:28



















【GIT版本控制】--提交更改




一、添加文件到暂存区 
在GIT中&#xff0c;要提交更改&#xff0c;首先需要将文件添加到暂存区&#xff08;Staging Area&#xff09;。这是一个用于存放将要提交的更改的临时区域。以下是将文件添加到暂存区的步骤&#xff1a; 
打开终端或命令提示符&#xff1a;首先&#x…...






编程日记
2023/10/6 15:36:27



















解决高分屏DPI缩放PC端百度网盘界面模糊的问题




第一步 更新最新版本 
首先&#xff0c;在百度网盘官网下载最新安装包&#xff1a; https://pan.baidu.com/download 进行覆盖安装 
第二步 修改兼容性设置 
右键百度网盘图标&#xff0c;点击属性&#xff0c;在兼容性选项卡中点击更改所有用户的设置 弹出的选项卡中选择更改高…...






编程日记
2023/10/6 15:35:26



















wordpress设置角色/在线seo超级外链工具




SPSecurity.RunWithElevatedPrivileges(delegate(){using(SPSite Site  newSPSite(SiteId)) {using(SPWeb Web Site.OpenWeb(WebUrl)) { ... } }}); 转载于:https://www.cnblogs.com/netboys/archive/2012/03/29/2423274.html...






编程日记
2025/1/23 14:50:32



















dreamweaver网页设计期末考试/志鸿优化网




美食无处不在&#xff0c;每天分享不同零食、烹饪技巧和新奇食物。在寻找美食的道路上一个前行&#xff0c;希望得到大家的肯定。生活节奏的加快&#xff0c;迫使我们吃饭的速度也在提升。速食产品受到大家的喜爱&#xff0c;方便面和汉堡这些食物也成为了我们的第一选择&#…...






编程日记
2025/1/23 12:50:09



















门户网站建设的特点/网站性能优化方法




如何通过禁用按钮避免jQuery.ajax重复请求 使用jQuery.ajax请求数据时&#xff0c;为了避免用户重复请求&#xff0c;需要禁用请求提交按钮&#xff0c;一般来说比较简单&#xff0c;只需要在按钮中添加disabled属性即可&#xff0c;下面写了一个测试实例&#xff0c;谈谈具体实…...






编程日记
2025/1/23 12:23:34



















阿里云 搭建wordpress/网络营销项目策划




新型时间类是我们需要不断追赶的Java8潮流&#xff0c;如果不做处理&#xff0c;序列化的结果是这样的&#xff1a; 我们统一做一下处理&#xff1a; 
Configuration
public class LocalDateSerializerConfig {private final String PATTERN  "yyyy/MM/dd HH:mm:ss";…...






编程日记
2025/1/23 11:08:26



















帆布网站做哪个/品牌推广的方式有哪些




class Category
{/*** 返回一维数组* static* param array $cate 要递归的数组* param string $html  子级分类前要显示的缩进符号。默认 ─* param integer $pid  父级分类ID。默认为 0&#xff0c;表示顶级分类* param integer $level  level级&#xff0c;配合 $html 显示足…...






编程日记
2025/1/23 10:26:45



















哪些网站是做快消品的/百度谷歌seo优化




参考链接&#xff1a;if __name__  __main__:from sklearn import metricsimport numpy as npimport matplotlib.pyplot as pltplt.figure(0).clf() # plt.close()将完全关闭图形窗口&#xff0c;其中plt.clf()将清除图形-您仍然可以在其上绘制另一个绘图。pred  np.random.ran…...






编程日记
2025/1/23 6:24:25