Skip to Content
CSS:权威指南,第 5 版
book

CSS:权威指南,第 5 版

by Eric Meyer, Estelle Weyl
May 2025
Intermediate to advanced
1128 pages
15h 21m
Chinese
O'Reilly Media, Inc.
Content preview from CSS:权威指南,第 5 版

第 10 章 浮动和定位 浮动和定位

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见:translation-feedback@oreilly.com

在很长一段时间里,浮动元素是我们所有网页布局方案的基础(这主要是因为浮动元素的属性 ,我们稍后会讲到)。(这主要是由于clear 这个属性,我们稍后会讲到。)但浮动元素从来就不是用来布局的;将其用作布局工具是一种黑客行为,其恶劣程度几乎不亚于将表格用于布局。它们只是我们所拥有的。不过,浮点本身就非常有趣和有用。尤其是最近添加的浮动形状功能,它允许创建非矩形形状,使内容可以流过。

浮动

自 20 世纪 90 年代初以来,通过声明(例如<img src="b5.gif" alt="B4" align="right"> )就可以浮动图像。这会使图像向右浮动,并允许其他内容(如文本)"围绕 "图像 "流动"。事实上,浮动这个名称来自 Netscape DevEdge 页面 "HTML 2.0 的扩展",其中解释了当时新出现的align 属性。与 HTML 不同,CSS 允许浮动任何元素,从图像到段落再到列表。这是通过属性float 实现的。

例如,要将图片浮动到左边,可以使用以下标记:

<img src="b4.gif" style="float: left;" alt="b4">

如图 10-1所示,图像 "浮动 "到浏览器窗口的左侧,文字围绕图像流动。

css5 1001
图 10-1. 浮动图像

您可以将元素浮动到leftright 以及inline-startinline-end 边缘。 当你想将元素浮动到内联轴的起点或终点时,无论该轴指向哪个方向,后两种方法都很有用。(有关内联轴的详细信息,请参见第 6 章)。

备注

在本节的其余部分,我们主要使用leftright ,因为它们可以简化解释。 至少在未来几年内,它们也几乎是你在野外看到的唯一float 值。

浮动元素

关于浮动元素,请注意以下几点。首先,浮动元素在某种程度上脱离了文档的正常流程,尽管它仍然会影响正常流程的布局。 在 CSS 中,浮动元素以一种极为独特的方式几乎独立存在,但它们仍然会对文档的其他部分产生影响。

产生这种影响的原因是,当一个元素浮动时,其他正常流动的内容会 "围绕 "它流动。我们对浮动图像的这种行为很熟悉,但如果浮动一个段落,情况也是一样。在图 10-2 中,由于为浮动段落添加了边距,因此可以非常清楚地看到这种效果:

p.aside {float: inline-end; width: 15em; margin: 0 1em 1em;
     padding: 0.25em; border: 1px solid;}
css5 1002
图 10-2. 浮动段落

关于浮动元素,首先要注意的一个事实是,浮动元素周围的边距不会折叠。如果你浮动一幅图像,并给它留出 ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

AirBnbBlueOriginElectronic ArtsHomeDepotNasdaqRakutenTata Consultancy Services

QuotationMarkO’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
QuotationMarkI wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
QuotationMarkI’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
QuotationMarkI'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Mark W.
Embedded Software Engineer

You might also like

学习 Java,第 6 版

学习 Java,第 6 版

Marc Loy, Patrick Niemeyer, Daniel Leuck
学习 React,第二版

学习 React,第二版

Alex Banks, Eve Porcello

Publisher Resources

ISBN: 9798341657021