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

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

news 2026/1/2 23:18:03

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

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2026/1/2 20:27:29

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/12/29 14:15:07

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/12/19 16:13:46

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/11/5 20:18:24

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2025/12/20 16:13:31

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2025/12/31 12:58:14

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

编程新知 2025/12/31 14:10:01