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

深入解析css-浮动-学习小结

news 2026/2/10 15:22:25

浮动设计初衷

类似报纸的布局栏，浮动是为了让图片嵌在文本流中，文本不会覆盖图片，但早期布局只有浮动，因此将浮动用于布局，后来才有了display:inline-block display: table flexbox和网格布局等

基本代码

<html><head><style>:root {box-sizing: border-box;}*,::before,:;after {box-sizing: inherit;}body {background-color: #eee;font-family: Helvetica, Arial, sans-serif;}body * + * {margin-top: 1.5em;}header {padding: 1em 1.5em;color: #fff;background-color: #0072b0;border-radius: .5em;margin-bottom: 1.5em;}.main {padding: 0 1.5em;background-color: #fff;border-radius: .5em;}</style></head><body><div class="container"><header><h1>TJH Special Club</h1></header><main class="main clearfix"><h2>Running Tips</h2><div><div class="media"><img class="media-image" src="runner.png"><div class="media-body"><h4>Strength</h4><p>Strength train is important</p></div></div><div class="media"><img class="media-image" src="shoes.png"><div class="media-body"><h4>Cadence</h4><p>cadence</p></div></div><div class="media"><img class="media-image" src="shoes.png"><div class="media-body"><h4>Transform it</h4><p>I like running</p></div></div><div class="media"><img class="media-image" src="runner.png"><div class="media-body"><h4>concentrate mind</h4><p>focus your mind</p></div></div></div></main></div></body>
</html>

双容器模式

将内容放入两个嵌套的容器总，通过设置内容器的外边距，让内容器左右居中

body是外层容器 container是内层容器，对内层容器按双容器模式设置样式。发现内容器宽度达到最大宽度，然后左右居中

.container {max-width: 1080px;margin: 0 auto;}

是否有必要学习浮动

有 贴近老代码，且让图片被文本环绕，浮动是少数能实现的方案

容器折叠和清除浮动

容器折叠

将四个media浮动到容器左侧。发现四个media好像跑到了容器外边，是因为浮动元素的高度不会加给父元素上，不过这恰恰符合浮动的初衷：浮动是为了让图片被文本环绕，所以图片高度不会加给父元素

.media {float: left;width: 50%;padding: 1.5em;background-color: #eee;border-radius: .5em;}

这并不是我们想要的，我们想要四个媒体元素都被包含在容器元素中

方法1

使用clear属性。需要将一个元素放到容器元素内的末尾元素，这会让容器元素扩展到该元素的下方

通俗理解，一个浮动图片会被文字环绕，如果清除浮动，则该图片自成一行，不再被文字环绕

理解清除浮动

可以用伪元素取代额外增加的div元素，清除浮动可以叫clearfix

伪元素是一种特殊的选择器，以双冒号::开头，最常用的伪元素是::before ::after

.clearfix::after {display: block;content: " ";clear: both;}

浮动元素外边距在容器内不会被折叠，而容器内非浮动元素外边距会被折叠（runnering tips紧贴最上边）

通过对容器内第一个和最后一个元素设置属性避免外边距折叠

.clearfix::before,.clearfix::after {display: table;content: " ";}

clear清除浮动只对块元素有效，所以可以用display: table但不能display:table-cell

相关文章：

深入解析css-浮动-学习小结

浮动设计初衷 类似报纸的布局栏&#xff0c;浮动是为了让图片嵌在文本流中&#xff0c;文本不会覆盖图片&#xff0c;但早期布局只有浮动&#xff0c;因此将浮动用于布局&#xff0c;后来才有了display:inline-block display: table flexbox和网格布局等 基本代码 <html&…...

编程日记 2024/12/10 5:14:38

【机器学习】机器学习的基本分类-无监督学习-K-Means聚类

K-Means 是一种基于划分的无监督学习算法&#xff0c;用于数据聚类任务&#xff0c;它通过迭代优化将数据分组为 k 个互斥的簇&#xff0c;使得每个簇内数据点的相似性最大化&#xff0c;而簇间的相似性最小化。它通过最小化簇内样本点到簇中心的距离平方和&#xff08;即误差平…...

编程日记 2024/12/10 5:12:35

.NET for Android/iOS应用的如何在各自的系统运行

1. .NET for Android 上的运行机制 Android 应用使用 Mono 运行时 或 .NET 运行时 在 Android 设备上执行。具体过程如下&#xff1a; 编译过程&#xff1a; C# 代码编写&#xff1a;开发者使用 C# 编写业务逻辑代码。编译为 IL&#xff1a;C# 代码通过 Roslyn 编译器 转换为…...

编程日记 2024/12/10 5:11:33

访问django后台，提示CSRF验证失败. 请求被中断403

我的项目是在服务器部署添加ip后报错的这个错误是因为 Django 的 CSRF 验证机制检测到请求的 Origin 或 Referer 头部与受信任的域名不匹配。要解决此问题&#xff0c;可以将新域名添加到 Django 的 settings.py 中的 CSRF_TRUSTED_ORIGINS 设置里. 1.非debug模式看到的报错信…...

编程日记 2024/12/10 5:09:30

Scala的隐式转换（1）

package hfd //需求&#xff1a; //完成一个功能&#xff0c;让所有的字符串都能调用isPhone方法&#xff0c;来校验自己是不是一个手机号 object Test37_1 {class StrongString(val str: String) {//开始你的代码def isPhone(): Boolean {val reg "1[3-9]\\d{9}".…...

编程日记 2024/12/10 5:08:28

华为TaurusDB与GaussDB：信创改造的“降本提效”之路

近年来&#xff0c;信创&#xff08;信息技术应用创新&#xff09;已成为中国国央企数字化转型的关键词。伴随这一浪潮&#xff0c;众多企业面临一个迫切问题&#xff1a;如何在兼顾性能与成本的前提下&#xff0c;完成核心系统的迁移改造&#xff1f;华为TaurusDB和GaussDB的加…...

编程日记 2024/12/10 5:07:26

Linux网络编程---本地套接字

1.概述 本地套接字 1&#xff1a;作用:本地的进程间通信 2.有关系的进程间通信 3.没有关系的进程间的通信 本地套结字实现流程和网络套结字实现相似&#xff0c;一般采用tcp 二.通信流程 本地套结字通信的流程:1.服务器端:1.1 int fd socket(AF_UNIX/AF_LOCAL,…...

编程日记 2024/12/10 5:06:25

数据结构之四：堆和二叉树

堆的实现:SData/Heap/heap.c Hera_Yc/bit_C_学习 - 码云 - 开源中国 树 树的概念 树&#xff1a;是一个非线性数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。 把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就…...

编程日记 2024/12/10 4:54:12

【论文阅读】国际开源发展经验及其对我国开源创新体系建设的启示

作者&#xff1a;包云岗老师 包云岗老师是计算机体系结构方向的大牛&#xff0c;推动了体系结构方面的开源事业! 欢迎对本栏目感兴趣的人学习"一生一芯"~ 学习体会&#xff1a; 承接前文&#xff0c;唐志敏老师讲到已有的软硬件生态系统和开发成本制约了对新结构的探…...

编程日记 2024/12/10 4:52:09

redis击穿，穿透，雪崩以及解决方案

目录 击穿 解决方案一 解决方案二 穿透 解决方案 雪崩 解决方案 击穿 指的是单个key在缓存中查不到&#xff0c;去数据库查询&#xff0c;这样如果并发不大或者数据库数据量不大的话是没有什么问题的。 如果数据库数据量大并且是高并发的情况下那么就可能会造成数据库压…...

编程日记 2024/12/10 4:50:07

时频转换 | Matlab格拉姆角和场Gramian angular summation field一维数据转二维图像方法

目录 基本介绍程序设计参考资料获取方式 基本介绍 时频转换 | Matlab格拉姆角和场Gramian angular summation field一维数据转二维图像方法 程序设计 clear clc % close all load x.mat % 导入数据 x x(1:5120); % 本数据只选择5120个点进行分析 fs 6400 ; % 数据采样频…...

编程日记 2024/12/10 4:49:06

qt QCryptographicHash详解

1、概述 QCryptographicHash是Qt框架中提供的一个类&#xff0c;用于实现加密散列函数&#xff0c;即哈希函数。哈希函数能够将任意长度的数据转换为固定长度的哈希值&#xff0c;也称为散列值或数据指纹。这个哈希值通常用于数据的完整性校验、密码存储等场景。QCryptographi…...

编程日记 2024/12/10 4:48:05

亚马逊云科技大语言模型加速OCR应用场景发展

目录 前言Amazon Bedrock关于OCR解决方案Amazon Bedrock进行OCR关键信息提取方案注册亚马逊账号API调用环境搭建 总结 前言 大语言模型是一种基于神经网络的自然语言处理技术&#xff0c;它能够学习和预测自然语言文本中的规律和模式&#xff0c;可以理解和生成自然语言的人工…...

编程日记 2024/12/10 4:45:01

什么是分库？分表？分库分表？

分库分表&#xff0c;是企业里面比较常见的针对高并发、数据量大的场景下的一种技术优化方案&#xff0c;所谓“分库分表”&#xff0c;根本不是一回事&#xff0c;而是三件事&#xff0c;他们要解决的问题也都不一样。 这三个事分别是“只分库不分表”、“只分表不分库”、以…...

编程日记 2024/12/10 4:39:55

QT 中 sqlite 数据库使用

一、前提 --pro文件添加sql模块QT core gui sql二、使用 说明 --用于与数据库建立连接QSqlDatabase--执行各种sql语句QSqlQuery--提供数据库特定的错误信息QSqlError查看qt支持的驱动 QStringList list QSqlDatabase::drivers();qDebug()<<list;连接 sqlite3 数据库 …...

编程日记 2024/12/10 4:34:50

不一样的CSS(4)--icon图标系列之svg

序言 上一节内容我们讲解了如何利用css去画一个五角星&#xff0c;其中包括了使用svg的方法&#xff0c;有些小伙伴们对svg的使用不是很了解&#xff0c;那么本节内容我们主要来讲一下&#xff0c;关于svg标签的的使用。 目录 序言一、svg的介绍二、安装SVG扩展插件三、SVG基…...

编程日记 2024/12/10 4:32:48

Level DB --- Cache

class Cache是Level DB中的重要的数据结构&#xff0c;它是一个LRU&#xff08;Least Recently Used&#xff09; Cache的实现。这里面的判断条件主要是内存大小&#xff08;而不是存储entry的个数&#xff09;。当内存达到上界&#xff0c;会释放不被使用的entry&#xff08;存…...

编程日记 2024/12/10 4:29:44

学在西电录播课使用python下载，通过解析m3u8协议、多线程下载ts视频块以及ffmpeg合并

本文涵盖的内容仅供个人学习使用&#xff0c;如果侵犯学校权利&#xff0c;麻烦联系我删除。 初衷 研究生必修选逃&#xff0c; 期末复习怕漏过重点题目&#xff0c;但是看学在西电的录播回放课一卡一卡的&#xff0c;于是想在空余时间一个个下载下来&#xff0c;然后到时候就…...

编程日记 2024/12/10 4:28:43

Springboot3介绍

一、Springboot3简介: https://docs.spring.io/spring-boot/docs/current/reference/html/getting-started.html?spmwolai.workspace.0.0.68b62306Q6jtTw#getting-started.introducing-spring-boot 无论使用XML、注解、Java配置类还是他们的混合用法&#xff0c;配置文件过于…...

编程日记 2024/12/10 4:23:35

Oracle 11G DataGuard GAP 修复过程（通过主库scn增备恢复）

Oracle 11G DataGuard GAP 修复 &#xff08;通过主库scn增备恢复&#xff09; 介绍 DG GAP 顾名思义就是&#xff1a;DG不同步&#xff0c;当备库不能接受到一个或多个主库的归档日志文件时候&#xff0c;就发生了 GAP。 那么&#xff0c;如果遇到GAP如何修复呢&#xff1f…...

编程日记 2024/12/10 4:21:32

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2026/1/13 9:59:27

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/2/8 6:37:43

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2026/2/8 4:08:40

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2026/2/10 3:44:54

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2026/1/23 7:56:54

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

编程新知 2026/2/1 17:50:36

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2026/1/30 6:03:31