网页的布局方式与浮动

php中世界最好的语言

发布时间：2018-03-13 10:56:30

2897人浏览过

来源于php中文网

原创

这次给大家带来网页的布局方式与浮动，网页布局方式与浮动的注意事项有哪些，下面就是实战案例，一起来看一下。

一. 网页的布局方式

1.什么是网页的布局方式?

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的;分为:标准流,浮动流,定位流

1.标准流(文档流/普通流)排版方式

1.1其实浏览器默认的排版方式就是标准流的排版方式

1.2在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素

1.3 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
垂直排版, 如果元素是块级元素, 那么就会垂直排版
水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版

2.浮动流排版方式

2.1浮动流是一种"半脱离标准流"的排版方式

2.2浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素相对于父元素左对齐或者右对齐

注意点:

1.浮动流中没有居中对齐, 也就是没有center这个取值
2.在浮动流中是不可以使用margin: 0 auto;(是无效的)

特点:

1.在浮动流中是不区分块级元素/行内元素/行内块级元素的
无论是级元素/行内元素/行内块级元素都可以水平排版
2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像

3.定位流排版方式

二. 浮动元素的脱标

1.什么是浮动元素的脱标?

脱标: 脱离标准流
当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标;

2.浮动元素脱标之后会有什么影响?

如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素;

三. 浮动元素排序规则

浮动元素排序规则 :

1相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面

2不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动

PaperFake

AI写论文

下载

3浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定(如果元素浮动前在标准流中的第一行,那么它浮动后就在第一行显示,如果浮动前在标准流中的第二行,浮动后就在第二行显示)

四. 浮动元素贴靠现象

什么是浮动元素贴靠现象?

1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边

五. 浮动元素的字围现象

什么是浮动元素字围现象?
浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象;一般用作图文混排!

浮动元素字围现象

六. 企业开发中什么时候使用标准流什么时候使用浮动流?

1.企业开发中什么时候使用标准流什么时候使用浮动流?
垂直方向使用标准流, 水平方向使用浮动流

2.拿到一个很复杂的界面如何入手?

2.1从上至下布局

2.2从外向内布局

2.3水平方向可以先划分为一左一右再对左边或者右边进行进一步布局

七. 浮动元素高度问题

1.在标准流中内容的高度可以撑起父元素的高度

2.在浮动流中浮动的元素是<a>不可以</a>撑起父元素的高度的! (父元素没有浮动,只有子元素浮动)

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关专题

TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开，深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析，帮助开发者构建类型安全、结构清晰、易维护的前端工程体系，提高团队协作效率与代码质量。

2026.03.13

Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开，深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例，帮助开发者掌握 Python 在高并发场景中的高效开发方法，并提升系统资源利用率与整体运行性能。

2026.03.12

C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开，系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例，帮助开发者掌握构建高可用微服务系统的关键技术，提高系统的可扩展性与维护效率。

178

2026.03.11

Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开，系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示，帮助开发者构建稳定高效的 Go 并发任务处理系统，提高系统在高负载环境下的处理能力与稳定性。

2026.03.10

Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开，重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析，帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系，提升团队协作效率与项目迭代速度。

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开，系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理，以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例，帮助开发者理解浏览器底层工作原理，并掌握提升网页加载速度与交互体验的实用技巧。

102

2026.03.06

Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开，深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例，分析内存安全保障原理与零成本抽象优势，并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学，掌握在高性能与安全性并重场景中的工程实践能力。

227

2026.03.05

PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开，重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景，深入分析性能瓶颈定位与优化思路，帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

532

2026.03.04