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

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

news 2026/2/9 14:45:55

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

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2026/2/8 20:41:58

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2026/2/5 4:39:03

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/10/4 20:58:43

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2026/1/8 0:40:27

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

编程新知 2025/11/9 14:40:17

车载诊断架构 --- ZEVonUDS（J1979-3）简介第一篇

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是…...

编程新知 2026/1/26 21:09:29

从实验室到产业：IndexTTS 在六大核心场景的落地实践

一、内容创作&#xff1a;重构数字内容生产范式 在短视频创作领域&#xff0c;IndexTTS 的语音克隆技术彻底改变了配音流程。B 站 UP 主通过 5 秒参考音频即可克隆出郭老师音色&#xff0c;生成的 “各位吴彦祖们大家好” 语音相似度达 97%&#xff0c;单条视频播放量突破百万…...

编程新知 2025/12/8 19:05:36