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

浮动属性样式

🍓浮动属性

属性名称中文注释备注
float设置盒子浮动left左浮动,right右浮动,none不浮动
clear清除浮动left清除左浮动,right清除右浮动,both左右浮动都清除(注意:clear清除浮动一般只有作用在块级元素上才能起作用)

🍓浮动的特点

  • 浮动后的盒子脱离标准流,并且可以在一行显示
  • 浮动可以将一个行内元素转换为块元素

🍓清除浮动

  • ⭐方法一:让因为被浮动影响的盒子自己去处理clear: both;
  • ⭐方法二:在浮动盒子的同级最后加一个没有宽高的盒子,设置清除浮动<div style="clear:both"></div>
  • ⭐方法三:伪元素选择器清除浮动
    .container::after {content: "";display: block;clear: both;width: 0;height: 0;visibility: hidden;overflow: hidden;
    }
    
    不成文的规定:为了防止content内容显示出来,一般会设置以下属性:width: 0;height: 0;visibility: hidden;overflow: hidden;
  • ⭐方法四:BFC清除浮动。overflow: hidden;作用于浮动盒子的父盒子,可以触发BFC,从而使得浮动盒子计算宽高

相关文章:

浮动属性样式

&#x1f353;浮动属性 属性名称中文注释备注float设置盒子浮动left左浮动&#xff0c;right右浮动&#xff0c;none不浮动clear清除浮动left清除左浮动&#xff0c;right清除右浮动&#xff0c;both左右浮动都清除&#xff08;注意&#xff1a;clear清除浮动一般只有作用在块…...

keepalived双机热备 (四十五)

一、概述 Keepalived 是一个基于 VRRP 协议来实现的 LVS 服务高可用方案&#xff0c;可以解决静态路由出现的单点故障问题。 原理 在一个 LVS 服务集群中通常有主服务器&#xff08;MASTER&#xff09;和备份服务器&#xff08;BACKUP&#xff09;两种角色的服务器…...

SpringBoot整合阿里云OSS,实现图片上传

在项目中&#xff0c;将图片等文件资源上传到阿里云的OSS&#xff0c;减少服务器压力。 项目中导入阿里云的SDK <dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.10.2</version>…...

Dynaminc Programming相关

目录 3.1 最长回文子串&#xff08;中等&#xff09;&#xff1a;标志位 3.2 最大子数组和&#xff08;中等&#xff09;&#xff1a;动态规划 3.3 爬楼梯&#xff08;简单&#xff09;&#xff1a;动态规划 3.4 买卖股票的最佳时机&#xff08;简单&#xff09;&#xff1…...

使用 Elasticsearch 轻松进行中文文本分类

本文记录下使用 Elasticsearch 进行文本分类&#xff0c;当我第一次偶然发现 Elasticsearch 时&#xff0c;就被它的易用性、速度和配置选项所吸引。每次使用 Elasticsearch&#xff0c;我都能找到一种更为简单的方法来解决我一贯通过传统的自然语言处理 (NLP) 工具和技术来解决…...

MNN学习笔记(八):使用MNN推理Mediapipe模型

1.项目说明 最近需要用到一些mediapipe中的模型功能&#xff0c;于是尝试对mediapipe中的一些模型进行转换&#xff0c;并使用MNN进行推理&#xff1b;主要模型包括&#xff1a;图像分类、人脸检测及人脸关键点mesh、手掌检测及手势关键点、人体检测及人体关键点、图像嵌入特征…...

主力吸筹指标及其分析和使用说明

文章目录 主力吸筹指标指标代码分析使用说明使用配图主力吸筹指标 VAR1:=REF(LOW,1); VAR2:=SMA(MAX(LOW-VAR1,0),3,1)/SMA(ABS(LOW-VAR1),3,1)*100; VAR3:=EMA(VAR2,3); VAR4:=LLV(LOW,34); VAR5:=HHV(VAR3,34); VAR7:=EMA(IF(LOW<=VAR4,(VAR3+VAR5*2)/2,0),3); /*底线:0,…...

Python高光谱遥感数据处理与高光谱遥感机器学习方法教程

详情点击链接&#xff1a;Python高光谱遥感数据处理与高光谱遥感机器学习方法教程 第一&#xff1a;高光谱基础 一&#xff1a;高光谱遥感基本 01)高光谱遥感 02)光的波长 03)光谱分辨率 04)高光谱遥感的历史和发展 二&#xff1a;高光谱传感器与数据获取 01)高光谱遥感…...

【洛谷】P1678 烦恼的高考志愿

原题链接&#xff1a;https://www.luogu.com.cn/problem/P1678 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 将每个学校的分数线用sort()升序排序&#xff0c;再二分查找每个学校的分数线&#xff0c;通过二分找到每个同学估分附近的分数线。 最后…...

开机自启CPU设置定频

sudo apt-get install expect sudo apt-get install cpufrequtils具体步骤如下&#xff1a; 安装 cpufrequtils 工具 ⚫ sudo apt-get install cpufrequtils ⚫ 需要联网下载修改配置文件 ⚫ sudo vi /etc/init.d/cpufrequtils ⚫ 将 GOVERNOR“ondemand” 改为&#xff1a; &g…...

嵌入式Linux开发实操(十二):PWM接口开发

# 前言 使用pwm实现LED点灯,可以说是嵌入式系统的一个基本案例。那么嵌入式linux系统下又如何实现pwm点led灯呢? # PWM在嵌入式linux下的操作指令 实际使用效果如下,可以通过shell指令将开发板对应的LED灯点亮。 点亮3个LED,则分别使用pwm1、pwm2和pwm3。 # PWM引脚的硬…...

消息中间件介绍

消息队列已经逐渐成为企业IT系统内部通信的核心手段。它具有低耦合、可靠投递、广播、流量控制、最终一致性等一系列功能&#xff0c;成为异步RPC的主要手段之一。当今市面上有很多主流的消息中间件&#xff0c;如ActiveMQ、RabbitMQ&#xff0c;Kafka&#xff0c;还有阿里巴巴…...

[Unity] 基础的编程思想, 组件式开发

熟悉 C# 开发的朋友, 在刚进入 Unity 开发时, 不可避免的会有一些迷惑, 例如不清楚 Unity 自己的思想, 如何设计与架构一个应用程序之类的. 本篇文章简要的介绍一下 Unity 的基础编程思想. 独立 Unity 很少使用 C# 的标准库, 例如 C# 的网络, 事件驱动, 对象模型, 这些概念在 …...

SVN 项目管理笔记

SVN 项目管理笔记 主要是介绍 SVN 管理项目的常用操作&#xff0c;方便以后查阅&#xff01;&#xff01;&#xff01; 一、本地项目提交到SVN流程 在SVN仓库下创建和项目名同样的文件夹目录&#xff1b;选中本地项目文件&#xff0c;选择SVN->checkout,第一个是远程仓库项…...

Android获取手机已安装应用列表JAVA实现

最终效果: 设计 实现java代码: //获取包列表private List<String> getPkgList() {List<String> packages new ArrayList<String>();try {//使用命令行方式获取包列表Process p Runtime.getRuntime().exec("pm list packages");//取得命令行输出…...

【校招VIP】有一个比赛获奖项目和参与的开源小项目,秋招项目竞争力够不够?三个标准,自己都可以估算

有个24届的学生问我&#xff1a;现在没有实习&#xff0c;能不能参与大厂秋招&#xff1f;手里有两个项目&#xff0c;一个是比赛的获奖项目&#xff0c;一个是CSDN上博主做的开源小项目&#xff0c;这两个项目竞争力够不够&#xff1f; 其实项目这块&#xff0c;无非就是三个…...

量化开发学习入门-概念篇

1.网格交易法 网格交易法&#xff08;Grid Trading&#xff09;是一种基于价格波动和区间震荡的交易策略。它适用于市场处于横盘或震荡的情况下。 网格交易法的基本思想是在设定的价格区间内均匀地建立多个买入和卖出水平&#xff08;网格&#xff09;&#xff0c;并在价格上…...

【草稿】关于文本句子分割(中文+英文)以及向量处理

获取文本 主函数 Main # -*- encoding: utf-8 -*- # Author: SWHL # Contact: liekkaskono163.com from pathlib import Path from typing import Dict, List, Unionimport filetypefrom ..utils import logger from .image_loader import ImageLoader from .office_loader i…...

【瑞吉外卖】所遇问题及解决方法

太菜了实习之余瑞吉外卖补充一下基础知识&#xff08;&#xff0c;不然真啥也不会了。 请输入正确的手机号&#xff01; 是因为我测试了我的手机号&#xff0c;爆红&#xff0c;以为方法有错。但其实是前端代码检查手机号是否符合规范的语句有点&#xff08;&#xff09;啊啊…...

【Hugo入门】基础用法

检查Hugo是否安装 hugo version显示所有可用命令 hugo help显示指定命令的可用子命令&#xff0c;例如查询server的所有子命令 hugo server --help建立你的网站&#xff0c;cd进入你的项目根目录运行 hugo默认发布内容到自动创建的public文件夹。 覆盖hugo或hugo server的默…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

API网关Kong的鉴权与限流:高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

C# WPF 左右布局实现学习笔记(1)

开发流程视频&#xff1a; https://www.youtube.com/watch?vCkHyDYeImjY&ab_channelC%23DesignPro Git源码&#xff1a; GitHub - CSharpDesignPro/Page-Navigation-using-MVVM: WPF - Page Navigation using MVVM 1. 新建工程 新建WPF应用&#xff08;.NET Framework) 2.…...