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

HTML + CSS - 网页布局之一般布局浮动布局

news 2026/2/9 10:01:18

1. 一般布局

1.1 一般布局相关参数

元素内容常常可以想像为放在一个盒子里，然后在周边加上内边距，边框和外边距，是盒子模型

默认一个块级区域会填充父类所有的行向空间，并且沿着块伸长容纳其内容，可以为块状体设置某些参数以此满足形状上的要求

例如：

• height

        设置块状体的高度

• width

        设置块状体的宽度

• border

        设置块状体边框的样式，颜色

• padding

 定义元素内容与其边框之间的内边距（空白区域）。换句话说，它是在元素的内容区域和边框之间添加的空间，内部距离。

单个值：意味着上、右、下、左的内边距都是 20px

两个值：第一个值用于上下方向的内边距，第二个值用于左右方向的内边距。

padding : 20px 10px 30px 5px;

一般布局是一套浏览器视口内组织元素如何放置的系统，默认块级元素按照父类的书写模式

每个块状元素会在上一个元素处另起一行。当块状体中内部文本超过块状体大小，则会自动空行。若相邻元素都设置外边距且接触，保留大的外边距。

1.2 外部设置        

margin: 设置元素的外边距，即元素与其他元素之间的空间。它可以控制元素周围的空白区域，从而调整元素在页面中的布局

margin:<top><right><bottom><left>;

单一值：四个方向的外边距都相同。一般默认为靠顶部，靠左的距离

两个值：一般默认为靠顶部，靠float设定的距离的距离；

或者直接指定margin：margin-right，margin-left，margin-top，margin-bottom

可自定义选择数值大小，或者使用‘auto’网页自动对齐

2. 浮动布局（Float Layout）

2.1 float

用于使元素浮动，可以实现简单的两栏或三栏布局。

float : left; float : right;将元素分别向左对齐与向右对齐。

<style>float:left;
</style>

设置成功后该元素会脱离正常的文档布局，吸附在父容器设定处。在正常布局中位于该元素之后的内容，此时会围绕浮动元素，填满空间。但与浮动元素同等级别的元素仍然保持正常布局（类似于无视了这个浮动元素）

浮动元素的margin设置对于正常元素与浮动元素之间的距离大小

<style type='text/CSS'>
.container{background-color:lightgray;
}
.float-box {float:left;width:100px;height:100px;margin-right:10px;
}
.clearfix::after{content:"";display:table;clear:both;
}
</style>
<body><div class="container clearfix"><div class="float-box"></div><div class="float-box"></div><div class="float-box"></div></div>
</body>

浮动元素外元素背景

浮动元素对于在其之下的元素进行吸附。

目标元素的行内盒子被缩短，所以文字会排布在浮动元素周围；但浮动元素从正常文档流移出，故段落的盒子仍然保持原有大小。

<!DOCTYPE html>
<head><title>This is a new</title><style type="text/css">body{margin:auto;width:70%;max-width: 800;}.box{float:left;background-color: #ADD8E6;height:100px;width:300px;margin: 10px;}.speical{background-color: #429FFF;height:50px;}.cleared{clear: left;}</style>
</head>
<html><body><h1>Welcome to my news</h1><div class='box'>Float</div><div class='speical'>haahahahahhahah</div><p class='cleared'>说起写作文，也许有的同学把它当作一种负担，每当一个新的题目出现在他的眼前时，就头疼不已。可是在我看来，写作文是一种快乐，它是生活中的乐趣。一个新的题目出现了，我的小脑袋会跟着这个题目不停地转动，在我小时侯刚开始学写作文时，也曾经有过两眼望青天，不知如何下笔，脑袋里一片空白的经历。</p><p>记得那是我上二年级的时候，老师让我们回家写一篇作文，题目自定。放学了，我闷闷不乐地回到了家里，一屁股坐在小书桌前发起了呆，一个半小时过去了，我才像挤牙膏一样挤出了一篇作文。我兴冲冲地跑进厨房，高兴地对妈妈说：“我作业写完了，您看！”妈妈把我的作文拿来一看，什么也没说，只是让我休息。</p><p>不一会，饭熟了，晚餐可真丰富呀，其中有我最爱吃的炒牛肉，我拿起筷子，往嘴里塞了一大块牛肉，哟，这是啥味呀，妈妈平时炒的牛肉可好吃了，今天怎么搞的，一点味也没有，真难吃！妈妈笑着对我说：“怎么样，难吃吧？你今天写的作文就像这盘菜一样，一点味道都没有，一篇精彩的作文，就如同一道精美的菜肴，不仅好吃，还耐人寻味。”我迷惑不解地问道：“妈妈，那我怎样才能写出精彩的文章呢？”妈妈听了，耐心地跟我讲解：“要想写好作文，必须牢记这四个字——‘两多三勤’。两多就是多阅读，多积累；三勤就是勤观察、勤思考、勤练笔。要是能坚持做好“两多三勤’，以后一定能写出精彩的文章来！”</p></body>
</html>

2.2 浮动元素的清除

在浮动元素之后的元素中添加新的类别：cleared

<style>.cleared{clear:left/right/both; /*停止哪一边的浮动元素*/}
</style>

该类别设置后，后续元素均变回正常布局。

2.3 浮动元素的父类处理

浮动元素默认父容器高度坍塌，即调整了子元素元素浮动靠左，默认换行靠左

后续元素操作依然会受到浮动元素的影响

	.wrapper{background-color: #000000;color:white;}</style>
</head>
<html><body><h1>Welcome to my news</h1><div class='wrapper'><div class='box'>Float</div><p>It's OKokokookokokokookokokokokokokokokokokokokokokokokokokokok</p></div>

解决方法是使用clearfix技巧

clearfix

当使用float属性让元素浮动时，父容器可能无法正确包含浮动的子元素，导致布局紊乱。

由于float嵌套在父类元素中，所以脱离正常布局，而父类仍然是正常布局。

想要将父类完全显示：

clearfix就是解决这种问题的技巧。

其原理在于，向包含浮动内容及其本身的盒子后方插入一些新的生成内容，并将生成的内容用于清除浮动效果。

.wrapper::after /*最后进行添加*/
{clear:both;display:block; content:'';     /*没有内容填充*/
}
	.wrapper::after{content:'';clear:both;display:table;}</style>
</head>
<html><body><h1>Welcome to my news</h1><div class='wrapper'><div class='box'>Float</div><p>It's OKokokookokokokookokokokokokokokokokokokokokokokokokokokok</p></div>

相关文章：

HTML + CSS - 网页布局之一般布局浮动布局

1. 一般布局 1.1 一般布局相关参数 元素内容常常可以想像为放在一个盒子里&#xff0c;然后在周边加上内边距&#xff0c;边框和外边距&#xff0c;是盒子模型 默认一个块级区域会填充父类所有的行向空间&#xff0c;并且沿着块伸长容纳其内容&#xff0c;可以为块状体设置某…...

编程日记 2024/9/16 12:25:29

python定时任务，定时爬取水质和天气

定时爬取水质和天气 代码 代码 from apscheduler.schedulers.background import BackgroundScheduler import requests import datetimeurlweather "http://localhost:8000/CrwalingViewWeather" # 天气接口 urlwater "http://localhost:8000/CrwalingViewW…...

编程日记 2024/9/16 12:21:26

ARM驱动学习之基础小知识

ARM驱动学习之基础小知识 • sch原理图工程师工作内容 – 方案 – 元器件选型 – 采购&#xff08;能不能买到&#xff0c;价格&#xff09; – 原理图&#xff08;涉及到稳定性&#xff09; • layout画板工程师 – layout&#xff08;封装、布局&#xff0c;布线&#xff0c…...

编程日记 2024/9/16 12:12:17

【字幕】恋上数据结构与算法之019动态数组07打印数组

是吧&#xff1f;什么意思呢&#xff1f;你看啊我们刚刚已经加了三个东西了&#xff0c;我现在希望能够打印一下这个速度&#xff0c;希望能把它里面所有元素打出来&#xff0c;那我们试一下&#xff0c;看它默认是怎么打&#xff0c;这个时候我们右击你会发现它打出来长这样子…...

编程日记 2024/9/16 12:10:15

Python基础语法(3)下

列表和元组 列表是什么&#xff0c;元组是什么 编程中&#xff0c;经常需要使用变量&#xff0c;来保存/表示数据。变量就是内存空间&#xff0c;用来表示或者存储数据。 如果代码中需要表示的数据个数比较少&#xff0c;我们直接创建多个变量即可。 num1 10 num2 20 num3…...

编程日记 2024/9/16 12:08:13

数据稀缺条件下的时间序列微分：符号回归(Symbolic Regression)方法介绍与Python示例

时间序列概况在日常生活和专业研究中都很常见。简而言之,时间序列概况是一系列连续的数据点 y(0), y(1), …, y(t) ,其中时间 t 的点依赖于时间 t-1 的前一个点(或更早的时间点)。 在许多应用中,研究者致力于预测时间序列概况的未来行为。存在各种建模方法。这些模型通常基于过…...

编程日记 2024/9/16 12:07:12

XML_Tomcat_HTTP

第四章 XML_Tomcat10_HTTP 一 XML XML是EXtensible Markup Language的缩写&#xff0c;翻译过来就是可扩展标记语言。所以很明显&#xff0c;XML和HTML一样都是标记语言&#xff0c;也就是说它们的基本语法都是标签。 可扩展 三个字表面上的意思是XML允许自定义格式。但这不代…...

编程日记 2024/9/16 12:06:11

GPT Prompt

Reference https://help.openai.com/en/articles/6654000-best-practices-for-prompt-engineering-with-the-openai-apihttps://platform.openai.com/docs/guides/prompt-engineeringbilibili 8分钟系统学习提示工程，别再说大模型还不够聪明！Prompt Engineering，提示词，Few…...

编程日记 2024/9/16 12:05:10

go基础知识归纳总结

无缓冲的 channel 和有缓冲的 channel 的区别&#xff1f; 在 Go 语言中&#xff0c;channel 是用来在 goroutines 之间传递数据的主要机制。它们有两种类型&#xff1a;无缓冲的 channel 和有缓冲的 channel。 无缓冲的 channel 行为&#xff1a;无缓冲的 channel 是一种同步…...

编程日记 2024/9/16 12:03:09

【字幕】恋上数据结构与算法之014动态数组02接口设计

申请表数组英文单词叫away&#xff0c;而这个数组是怎么样的申请表&#xff1f;数组是一种顺序存储的申请表&#xff0c;什么叫顺序存储&#xff1f;就是数组里面的所有元素&#xff0c;它的内存地址是连续的&#xff0c;大家的内存是连续的&#xff0c;比如说举个例子&#xf…...

编程日记 2024/9/16 12:02:07

ffmpeg硬件解码一般流程

流程 根据硬件名称&#xff0c;查询是否是支持的类型 const char *device_name "qsv"; //cuda enum AVHWDeviceType type av_hwdevice_find_type_by_name(device_name); if(type AV_HWDEVICE_TYPE_NONE) {//如果一个硬件类型是不支持的&#xff0c;打印所有支持…...

编程日记 2024/9/16 11:58:03

微信支付开发-程序开发

一、操作流程图 二、后端代码实现 1、题库实现 a、列表、所有、详情、保存、启禁用、导入答题 b、获取奖品信息、保存奖品信息、 class Question extends Base {// 列表public function getList(){$param $this->request->param();$where [];if(!empty($param[title])…...

编程日记 2024/9/16 11:57:02

【数据结构】排序算法系列——堆排序（附源码+图解）

堆排序 堆排序基于一种常见的**[[二叉树]]结构**&#xff1a;堆 我们前面讲到选择排序&#xff0c;它在待排序的n个记录中选择一个最小的记录需要比较n一1次。本来这也可以理解&#xff0c;查找第一个数据需要比较这么多次是正常的&#xff0c;否则无法知道它是最小的记录。 …...

编程日记 2024/9/16 11:56:01

Linux——应用层自定义协议与序列化

目录 一应用层 1再谈 "协议" 2序列化与反序列化 3理解read,write,recv,send 4Udp vs Tcp 二网络版本计算器 三手写序列和反序列化 四进程间关系与守护进程 1进程组 1.1什么是进程组 1.2组长进程 2会话 2.1什么是会话 2.2会话下的前后台进程 3作业控…...

编程日记 2024/9/16 11:55:00

CGAL 从DSM到DTM-建筑物区域提取

CGAL 从DSM到DTM-建筑物区域提取 生成的DSM被用作DTM计算的基础&#xff0c;即地面表示为过滤掉非地面点后的另一个TIN。主要是去除一些建筑物和植被非地形点。 建筑物立面及连通区域提取 建筑物立面的特征是三角形面片的高度变化剧烈。 通过遍历每一个三角面片&#xff0c;…...

编程日记 2024/9/16 11:50:57

Python--编码解码报错

报错问题 错误信息 UnicodeDecodeError: gbk codec cant decode byte 0xac in position 2: illegal multibyte sequence 通常出现在尝试使用 GBK 编码解码某些二进制数据时&#xff0c;但数据中包含了无法被 GBK 解码的字符。具体错误提示是解码器在处理某个字节时发现该字节无…...

编程日记 2024/9/16 11:49:56

大屏可视化常用图标效果表达

1-echarts-雷达图 2-echarts-仪表盘 3-echarts-水球图&#xff08;利用插件&#xff0c;echarts-liquidfill&#xff09; 4-element UI tree 添加连接线&#xff0c;修改样式或使用插件&#xff08;element-tree-line&#xff09; 5-echarts-漏斗图 6-echarts-饼状图嵌套 optio…...

编程日记 2024/9/16 11:48:55

高通Liunx 系统镜像编译

本文将会介绍如何在编译高通Liunx代码, 具体可以在高通 Linux | 高通下查看相关信息。 编译服务器配置 首先&#xff0c;准备一台Ubuntu 22.04版本主机或者服务器 1&#xff0c;编译Yocto 系统&#xff0c;需要如下一些配置 sudo apt update sudo apt install repo gawk wg…...

编程日记 2024/9/16 11:46:38

105、解析Java中1000个常用类：StringTokenizer类，你学会了吗？

在线工具站 推荐一个程序员在线工具站：程序员常用工具（http://cxytools.com），有时间戳、JSON格式化、文本对比、HASH生成、UUID生成等常用工具，效率加倍嘎嘎好用。程序员资料站 推荐一个程序员编程资料站：程序员的成长之路（http://cxyroad.com），收录了一些列的技术教程…...

编程日记 2024/9/16 11:45:25

虚幻引擎 | 实时语音转口型 Multilingual lipsync

实时语音转口型&#xff1a;EPIC的metahuman sdk&#xff0c;NVIDIA的audio2face&#xff0c;都好。本文使用metahuman sdk 需要工具&#xff1a;Metahuman SDK网页账号&#xff0c;获取两日免费tokens https://space.metahumansdk.io/#/unauthorized ———————————…...

编程日记 2024/9/16 11:42:04

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

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

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2026/2/8 20:42:46

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/2/5 4:28:28

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/2/8 12:24:34

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2026/1/29 5:34:29

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2026/2/6 13:42:22

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2026/1/23 3:36:07

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2026/2/2 17:06:29

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2026/1/25 10:16:57