0

0

float怎么用?css:float浮动使用总结

伊谢尔伦

伊谢尔伦

发布时间:2017-06-05 15:33:13

|

3220人浏览过

|

来源于php中文网

原创

对于开发人员来说,float浮动是需要经常使用的,基本离不开它,却常常忍受着它给你带来的种种痛苦,也许你觉得它就那么一点儿知识,但是你真的能驾驭它么?css float浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。本章节就来聊聊 float浮动的使用方法。

可以先学习php中文网相关的免费课程

1. 学习《CSS 在线手册》中的 CSS Float(浮动) 课程

CSS 在线手册

2. 观看 《黑马程序员css视频教程》中的 浮动 章节

立即学习前端免费学习笔记(深入)”;

黑马程序员css视频教程

float浮动相关内容

1. float浮动你所不知道的用法详解

float最初的设计初衷,是为了实现图文混排效果,让文字环绕图片。如今的用法基本上都是为了实现横向排版,虽然是一种“误用”,却往往能达到我们想要的效果。大部分人知道用float,但却不是所有人都知道float的原理和设计初衷。

2. css浮动-float/clear的图文详解

假如某个p元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

3. float的正确用法,90%的人都用错了

float还有一个很有用的特性,就是清除空格。这个我不贴图片了,描述一下就好了。比如在一个p里面放我张图片,图片与图片之间默认会有几像素的空格,也可以称之为缝隙。但是往往这个缝隙或者空格并不是我们需要的,这时候只要给图片一个float,让其脱离文档流,图片与图片之间将会严丝合缝的在一起。

4. css多个div浮动float高度自适应的两种方法

采用 Div + CSS 进行三列或二列布局时,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同。

5. 详解CSS中float浮动

a.float的起源       浮动最初的设计是用来做文字的环绕效果的,这也是设计者想让我们做的东西。

随缘网络php企业网站管理系统2.0
随缘网络php企业网站管理系统2.0

随缘网络PHP企业网站管理系统V2.0正式发布,该企业网站管理系统采用PHP+MYSQL编写,界面色调风格延续之前1.0版管理系统简洁浅蓝色风格,稍有所变动。变更分类树形目录方式采用jquery库,产品,文章三级无限分类。希望大家能够喜欢。系统中难免有些小问题,希望大家在使用中有什么问题可到本站论坛提出,我们将总结各问题后给予修正并升级。本站再次声明对于免费版系列系统本站不提供QQ电话等技术咨询服

下载

b.float的参数

  float属性的参数取值有三个:

  left:表示元素浮动在左边。

  right:表示元素浮动在右边。

  none:对象不浮动,遵循标准文档流。

c.效果展示(以float:left为例,float:right的情况只是位置的不同)

6. CSS Float(浮动)0

浮动有4个属性:left(左浮动)、right(右浮动)、none(不浮动)、inherit(继承)。浮动元素的包含块是其最近的块级祖先元素。

浮动元素会左偏移(或右偏移),直到它的外边界接触到『包含块的内边界』或『另一个浮动元素的外边界』。

相关问答

1.CSS Float(浮动)1

2. CSS Float(浮动)2

3. CSS Float(浮动)3

【相关推荐】

 1. php中文网免费教程:CSS Float(浮动)4

 2. php中文网免费视频教程:CSS Float(浮动)5

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
AO3官网入口与中文阅读设置 AO3网页版使用与访问
AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own(AO3)官网入口展开,系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法,并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程,帮助用户稳定访问 AO3 官网,高效完成中文阅读与作品浏览。

89

2026.02.02

主流快递单号查询入口 实时物流进度一站式追踪专题
主流快递单号查询入口 实时物流进度一站式追踪专题

本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容,重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题,帮助用户快速获取最新物流状态,提升查件效率与使用体验。

24

2026.02.02

Golang WebAssembly(WASM)开发入门
Golang WebAssembly(WASM)开发入门

本专题系统讲解 Golang 在 WebAssembly(WASM)开发中的实践方法,涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化,以及典型应用场景(如前端计算、跨平台模块)。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

11

2026.02.02

PHP Swoole 高性能服务开发
PHP Swoole 高性能服务开发

本专题聚焦 PHP Swoole 扩展在高性能服务端开发中的应用,系统讲解协程模型、异步IO、TCP/HTTP/WebSocket服务器、进程与任务管理、常驻内存架构设计。通过实战案例,帮助开发者掌握 使用 PHP 构建高并发、低延迟服务端应用的工程化能力。

4

2026.02.02

Java JNI 与本地代码交互实战
Java JNI 与本地代码交互实战

本专题系统讲解 Java 通过 JNI 调用 C/C++ 本地代码的核心机制,涵盖 JNI 基本原理、数据类型映射、内存管理、异常处理、性能优化策略以及典型应用场景(如高性能计算、底层库封装)。通过实战示例,帮助开发者掌握 Java 与本地代码混合开发的完整流程。

5

2026.02.02

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

62

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

55

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

27

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.2万人学习

CSS教程
CSS教程

共754课时 | 26.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号