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

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

news 2025/9/23 0:51:57

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

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/9/6 20:28:13

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/6/15 21:47:30

工程地质软件市场：发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/9/9 8:26:07

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/8/22 22:34:43

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

编程新知 2025/9/2 1:07:37

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/7/9 17:59:19

tauri项目，如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

编程新知 2025/9/22 18:02:26

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/9/11 6:56:11

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

编程新知 2025/9/21 18:42:05

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...

编程新知 2025/9/22 6:04:36