css中的浮动

在 CSS 中,浮动(float)是一种定位元素的方式,它允许元素脱离正常的文档流,并向左或向右移动,直到其边缘碰到包含块或者另一个浮动元素的边缘。下面从多个方面详细介绍 CSS 浮动:

一,浮动的结果

浮动后的元素会脱离标准流,不会再保留原先的位置,会飘起来。

浮动后的元素不会出现margin塌陷问题。

任何元素都可以浮动,添加浮动后都具有行内块元素的特性。(如span添加浮动后,可以设置宽和高)

二,浮动的影响

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。

为了约束浮动元素的位置,先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则。

三,清除浮动

为什么要清除浮动?由于父盒子在很多情况下,不方便给高度,但是盒子浮动又不占有位置,最后父盒子高度为0时,就会影响下面的标准流盒子。
清除浮动后,父级就会根据子盒子自动检测高度,父级有了高度,就不会影响下面的标准流了。
清除浮动的方法1:在浮动元素末尾添加一个新的标签(块级元素),如<div style="clear:both"><div>
清除浮动的方法2:为父元素添加overflow属性,将其属性值设置为hidden,auto或者scroll。
清除浮动的方法3:为父元素的class添加clearfix,并且在前面添加代码:

.clearfix:before,
.clearfix:after {content: "";display: table;
}
.clearfix:after {clear: both;
}
.clearfix {*zoom: 1;
}

四,注意事项

一浮全浮。在同一行上的盒子,一个盒子加上浮动后,其他盒子也要浮动。不然浮动会失效。
 

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

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

相关文章

element-plus中form表单组件的使用

1.如何让每个表单项对齐&#xff1f; 问题描述&#xff1a;如下图&#xff0c;每个表单项的输入框/下拉框/日期选择器是没有对齐的&#xff0c;我们希望它们纵向是对齐的。 解决方案&#xff1a;给el-form标签&#xff0c;加上label-width"100px"即可。意思就是给每个…

线性搜索算法

何时使用线性搜索算法&#xff1f; 当处理一个小数据集时。当搜索存储在连续内存中的数据集时。 线性搜索算法在什么情况下优于其他搜索算法&#xff1f; 当列表或数组未排序时&#xff0c;或者当输入的大小相对较小时&#xff0c;首选线性搜索算法。它易于实现&#xff0c;并…

踩坑记录:yolov5环境版本要求比较严苛?

在安装yolov5环境时&#xff0c;numpy安装失败报错metadata-generation-failed 报错如下&#xff1a; Collecting numpy1.18.5 (from -r /*****/yolov5-5.0/requirements.txt (line 5))Using cached https://pypi.tuna.tsinghua.edu.cn/packages/01/1b/d3ddcabd5817be02df0e6…

Java设计模式系列:单例模式的7种实现与适用场景

一、单例模式核心价值与实现原则 1. 使用场景 全局配置类(如数据库连接池)日志记录器Spring默认Bean作用域硬件设备访问(如打印机)2. 设计三原则 私有构造器:禁止外部实例化静态实例持有:全局唯一访问点延迟加载(可选):避免资源浪费二、七种单例实现方式深度解析 1.…

OpenManus-通过源码方式本地运行OpenManus,含踩坑及处理方案,chrome.exe位置修改

前言&#xff1a;最近 Manus 火得一塌糊涂啊&#xff0c;OpenManus 也一夜之间爆火&#xff0c;那么作为程序员应该来尝尝鲜 1、前期准备 FastGithub&#xff1a;如果有科学上网且能正常访问 github 则不需要下载此软件&#xff0c;此软件是提供国内直接访问 githubGit&#…

【最新】DeepSeek 实用集成工具有那些?

deepseek 系列github仓库地址 【主页】deepseek-aiDeepSeek-R1DeepSeek-V3DeepSeek-VL2【本文重点介绍】awesome-deepseek-integration 注意&#xff1a;以下内容来自awesome-deepseek-integration DeepSeek 实用集成&#xff08;awesome-deepseek-integration&#xff09; 将…

开源!速度100Kb/s的有线和无线双模ESP32S3芯片的DAP-Link调试器

开源&#xff01;速度100Kb/s的有线和无线双模ESP32S3芯片的DAP-Link调试器 目录 开源&#xff01;速度100Kb/s的有线和无线双模ESP32S3芯片的DAP-Link调试器本项目未经授权&#xff0c;禁止商用&#xff01;本项目未经授权&#xff0c;禁止商用&#xff01;本项目未经授权&…

Flink测试环境Standalone模式部署实践

1.JDK环境 参考官方文档&#xff1a; https://nightlies.apache.org/flink/flink-docs-release-1.20/release-notes/flink-1.18/ 2.下载Flink&#xff1a;https://flink.apache.org/downloads/ 本次验证用的是&#xff1a;https://www.apache.org/dyn/closer.lua/flink/flink…

在16卡服务器上使用最新版的CUDA和驱动训练`llama - 2 - 7b`和`llama - 2 - 70b`模型,并生成训练指标数据

要在16卡服务器上使用最新版的CUDA和驱动训练llama - 2 - 7b和llama - 2 - 70b模型&#xff0c;并生成训练指标数据&#xff0c;你可以按照以下步骤进行&#xff1a; 1. 环境准备 确保你的服务器已经安装了最新版的CUDA和驱动&#xff0c;并且安装了必要的Python库&#xff0…

macOS 终端优化

macOS 安装、优化、还原、升级 Oh My Zsh 完全指南 &#x1f680; Oh My Zsh 是 macOS 终端增强的利器&#xff0c;它能提供强大的自动补全、主题定制和插件支持&#xff0c;让你的终端更高效、更炫酷。本文将全面介绍 如何安装、优化、还原、重新安装和升级 Oh My Zsh&#x…

计算机网络--访问一个网页的全过程

文章目录 访问一个网页的全过程应用层在浏览器输入URL网址http://www.aspxfans.com:8080/news/index.aspboardID5&ID24618&page1#r_70732423通过DNS获取IP地址生成HTTP请求报文应用层最后 传输层传输层处理应用层报文建立TCP连接传输层最后 网络层网络层对TCP报文进行处…

CAAC无人机考证备考清单

一、培训机构内部的考试大纲/备考指南 《机长笔试大纲》 《机长口试大纲》 《教员笔试大纲》 《教员口试大纲》&#xff08;不同机构的文件、命名可能不同&#xff09; 二、培训机构内部题库 题库内容包含(仿照多旋翼题库制作&#xff09;&#xff1a; 分类 子分…

【BUG】类文件具有错误的版本 61.0, 应为 52.0,请删除该文件或确保该文件位于正确的类路径子目录中。

报错&#xff1a; [ERROR] 类文件具有错误的版本 61.0, 应为 52.0 [ERROR] 请删除该文件或确保该文件位于正确的类路径子目录中。 报错截图&#xff1a; 原因&#xff1a;Java 版本和 Spring 不兼容&#xff0c;显示 Spring 版本过高 解决方法 1. 使用更高版本的 J…

卷积神经网络(笔记01)

视觉处理三大任务&#xff1a;分类、目标检测、图像分割 CNN网络主要有三部分构成&#xff1a;卷积层&#xff08;Convolutional Layer&#xff09;、池化层&#xff08;Pooling Layer&#xff09;和激活函数 一、解释卷积层中的偏置项是什么&#xff0c;并讨论在神经网络中引…

Django-ORM-prefetch_related

Django-ORM-prefetch_related 模型定义N1 查询问题示例 使用 prefetch_related 优化查询处理更复杂的查询示例&#xff1a;预取特定条件的书籍示例&#xff1a;预取多个关联字段 性能比较注意事项总结 通过 Author 和 Books 两个模型来理解 Django 的 prefetch_related 方法。 …

Spring Boot3整合Knife4j(4.5.0)

整体概述 Spring Boot 是用于简化 Spring 应用开发的框架&#xff0c;通过自动配置和约定大于配置原则&#xff0c;能让开发者快速搭建和运行 Spring 应用。Knife4j 是基于 Swagger 增强的 API 文档生成工具&#xff0c;可方便展示和调试 API 接口&#xff0c;生成美观易用的 …

Java 大视界 -- 区块链赋能 Java 大数据:数据可信与价值流转(84)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…

K8S学习之基础二十四:k8s的持久化存储之pv和pvc

K8S的存储之pv和pvc 在 Kubernetes (k8s) 中&#xff0c;持久化存储是通过 PersistentVolume (PV) 和 PersistentVolumeClaim (PVC) 来实现的。PVC 是用户对存储资源的请求&#xff0c;而 PV 是集群中的实际存储资源。PVC 和 PV 的关系类似于 Pod 和 Node 的关系。 Persisten…

【Hive】Hive安装

Hive 第一章 Hive的基础知识 第二章 Hive安装 第三章 DDL&#xff08;Data Definition Language&#xff09;数据定义 第四章 DML&#xff08;Data Manipulation Language&#xff09;数据操作 第五章 Hive查询 第六章 Hive的基础知识 第七章 Hive函数 第八章 分区表和分桶表 …

关于C/C++语言的初学者在哪刷题,怎么刷题

引言&#xff1a; 这篇博客主要是针对初学者关于怎么在网上刷题&#xff0c;以及在哪里刷题。 1.介绍平台&#xff08;在哪刷题&#xff09;&#xff1a; 1.牛客牛客网https://www.nowcoder.com/ &#xff1a;有许多面试题&#xff0c;也有许多供学习者练习的题 2.洛谷洛谷 …