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

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

news 2026/2/8 13:37:51

浮动设计初衷

类似报纸的布局栏，浮动是为了让图片嵌在文本流中，文本不会覆盖图片，但早期布局只有浮动，因此将浮动用于布局，后来才有了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

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/2/5 4:33:24

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2026/2/1 5:45:17

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

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

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

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

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2026/1/29 9:14:58

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2026/1/28 21:45:43

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2026/1/31 8:16:58