在本教程中，我们将研究在网页上定位元素的所有方法。HTML文档有一个特定的流程，学习如何定位意味着要了解这个流程是如何运作的，如何脱离这个流程，以及如何回到这个流程中来安排网页上的元素。在谈论CSS的定位时，我们还需要谈论浮动和浮动元素。浮动元素允许设计者 "侵入 "正常的页面流程，使元素向左或向右移动，而不仅仅是自上而下。CSS定位可以让设计者把元素放在他们喜欢的任何地方，而且精度很高。
CSS流程
在介绍中，我们谈到了一点 "流"。在CSS中，这意味着元素是按照它们在HTML源代码中出现的顺序在屏幕上呈现的。这意味着从上到下，从左到右。我们了解到，在盒式模型中，块级元素是相互堆叠的，而内联元素则是相互挨着显示的。当浏览器改变尺寸时，块级元素会动态地增长和收缩，以适应页面的全部宽度。内联级元素则根据需要包裹到新的行中。
这张图显示了块级
、
和
标签是如何消耗页面的全部宽度的。内联文本只占60%左右的宽度。
当浏览器调整大小时，块级元素继续占用页面的全部宽度。内联文本根据需要重新流向新的行。
这就是所谓的文档流的含义。元素相互堆叠，根据需要腾出空间。你可以建立整个网站而不需要改变正常的流程。然而，要建立更高级的布局，你需要开始使用浮动和定位。这就是你有意打破元素的正常流程，以应用特定的位置属性。
CSS浮动
当你使用 **float**属性时，你是在侵入正常的文档流程。它的取值范围是 left, right, none, , 或 inherit.浮动允许内容围绕块状元素，可以用来建立多栏布局，从列表中获得导航工具栏，以及其他有趣的效果。我们可以在我们的页面中插入一张图片来演示无浮动、左浮动和右浮动。
没有浮动的图片
img {
padding-right: 10px;
}
向左浮动的图片
img {
padding-right: 10px;
float: left;
}
右浮动的图片
所以我们可以看到，浮动属性是非常有用的。我们可以用它来将图片向左或向右移动，并让文字环绕着它。这有助于更好地利用页面上的空间。这里有一些关于浮动的要点需要了解。
- 一个浮动的元素被从正常的流程中移除。当你对页面上的一个元素应用浮动时，该html元素现在被从正常的页面流程中移除。然而，令人困惑的是，该元素将继续对周围的任何内容产生影响。把它想象成河流中的一个岛屿。岛屿不在河流的流向中，但河流仍然需要在岛屿周围流动。
- 一个浮动的元素保持在它的包含元素中。浮动的元素保持在包含元素的盒子模型的内容区域内。
- 整个元素盒被移动。当一个元素浮动时，整个元素盒从外边缘到外边缘都会受到影响。
块级浮动与内联浮动
浮动可以应用于内联级元素和块级元素。例如，我们可以浮动一个元素，它是内联的。
html
<body>
<div class="container">
<p><span>Note! This is some important text!</span>Lorem ipsum dolor...</p>
</div>
</body>
css
span {
float: right;
margin: 15px;
width: 150px;
background-color: lightcoral;
padding: 40px;
}
这是个相当酷的效果。在浮动文本元素时，有几件事需要注意。你应该设置宽度属性，否则盒子的内容区域就会扩展到最宽的宽度。这是因为设置了浮动的内联元素的行为就像它们是块级元素一样。它们将遵循块级元素的显示规则，在所有四边呈现出边距。此外，浮动元素的边距不会像在正常流程中那样塌陷。
块级浮动
现在我们可以看到一个块级浮动的例子，我们使用一个
元素并将其浮动到左边。
html
<body>
<div class="container">
<h2>Paragraph Block Level Float</h2>
<p>
Expedita dolorem voluptatem quibusdam...
</p>
<p class="pfloat">Lorem ipsum dolor sit amet...
</p>
<p>
Expedita dolorem voluptatem quibusdam...
</p>
</div>
</body>
css
.pfloat {
float: left;
width: 400px;
border: 2px solid lightcoral;
}
另一个整洁的效果。这个段落向左移动，在html源中排在它后面的段落现在环绕着它。在正常的流程中，这两个段落是相互堆叠的，但请记住，一旦应用了浮动，该元素就不再是正常流程的一部分。同样，你必须设置宽度属性，否则，浮动元素的宽度将填满浏览器窗口或其他包含元素的所有可用宽度。
如何清除浮动
就像我们现在知道的，当你使用浮动时，正常的文档流被黑掉或关闭了。一定有办法把它重新打开吧？确实有。它是通过使用 **clear**属性。应用 **clear**属性允许你说，"好吧--让我们把正常的文档流重新打开"。换句话说，你希望文档中的下一个元素能清除浮动元素的底部。让我们来看看为什么我们真的需要这个清除属性。考虑一下这个标记。
html
<body>
<div class="container">
<img src="city.png" width="350">
<p>The image here does not have any float property.</p>
</div>
</body>
这就是我们所期望的，对吗？我们看到了图片，然后在下一行我们看到了段落。好了，现在你会想："嗯，如果把图像移到右边就好了。你当然知道怎么做，所以你很高兴地去给那张图片应用了浮动:右键!让我们看看会发生什么。
css
img {
float: right;
}
说什么？
标签显然是在我们的html中的标签之后。你可能只是想让图片向右移动，但并不想让这段文字改变它在页面上的位置。这就是clear的作用。我们需要以某种方式告诉这个段落，"嘿--在你越过任何浮动元素之前，不要在页面上显示自己"。这就是我们所说的清除浮动的意思。由于我们对图片应用了float:right，我们可以对段落应用clear:right。
css
p {
clear: right;
}
你也可以简单地使用clear:both，当你有几个浮动元素，而你想确保一个元素在所有浮动元素下面开始时，这一点特别有用。想象一下，我们现在在页面上有两张图片，一张要向左浮动，而另一张向右浮动。此外，第二张图片比第一张高。让我们看看在这种情况下，清除属性会发生什么。
html
<body>
<div class="container">
<img class="city" src="city.png" width="200">
<img class="cave" src="cave.png" width="400">
<h2>City is float:left - Cave is float:right</h2>
</div>
</body>
在没有清除
元素的情况下，看看这个布局是多么杂乱无章。
现在让我们对
应用clear:left，看看效果如何。
h2 {
clear: left;
}
好的，这有点好，但还不完全正确。因为我们只清除了左边的浮动，
就显示在它所清除的元素（城市）之后。在这种情况下，我们要清除两个浮动的元素。当我们修复这个清除属性时，事情看起来好多了。
现在
同时 清除了城市和洞穴的浮动图像。
如何浮动多个元素
浮动多个元素可以用来在网页上创造各种效果。你可以创造的两个常见效果是多列布局，以及将
- 列表中的链接变成一个水平菜单。当几个元素浮动时，它们永远不会重叠在一起。浮动的元素将总是尽可能地向左或向右浮动，并尽可能地在页面的高处浮动。让我们先在html中放置四个段落，每个
标签里面都会有一张图片。记住，
标签是一个块级元素，所以它们中的几个会相互堆叠在一起，占据浏览器的全部宽度。当我们开始时完全没有浮动，这是我们得到的结果。
html
<body>
<div class="container">
<p><img class="city" src="city.png" width="150"></p>
<p><img class="cave" src="cave.png" width="150"></p>
<p><img class="lake" src="lake.png" width="150"></p>
<p><img class="building" src="building.png" width="150"></p>
</div>
</body>
现在，我们可以开始使用 **float**属性。首先，我们只是做了一个简单的float:left。
p {
float: left;
}
很酷！我们应该在这些段落之间添加一些空间。我们应该在这些段落之间添加一些空间。我们可以用 margin.
p {
float: left;
margin: .4%;
}
非常好最后，我们可以尝试将浮动设置为右边而不是左边，看看这对网页的布局有何影响。
p {
float: right;
margin: .4%;
}
非常有趣这证明了浮动的一个重要概念。浏览器以自上而下的顺序将浮动应用于多个元素。显然，在我们的html标记中，
标签中的图片顺序是城市、洞穴、湖泊和建筑。请注意，当我们向右浮动时，页面上的顺序是不同的。这是因为浏览器首先看到的是城市，并向右浮动，然后看到的是山洞，并向右浮动，以此类推。这就产生了我们上面看到的效果。
在和- 中使用浮点
你可能已经熟悉了HTML中无序列表的外观。这里只是一个无序列表中的CSS相关链接的集合。
<body>
<div class="container">
<ul>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Animate.css</a></li>
<li><a href="#">Normalize.css</a></li>
<li><a href="#">Bulma</a></li>
<li><a href="#">Hover</a></li>
<li><a href="#">Tailwindcss</a></li>
<li><a href="#">basscss</a></li>
</ul>
</div>
</body>
让我们用CSS和浮动器把这个链接列表变成一个很酷的导航菜单。
首先，我们要去掉默认
- 的子弹造型。
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
现在，我们把每个
ul li {
float: left;
}
现在，让列表中的每个链接成为一个块级元素，并添加一些边距和填充。
ul li a {
display: block;
padding: 5px;
margin: 5px;
}
最后，按你的意愿添加样式。为了简洁起见，我们删除了几个链接。
ul li a {
display: block;
padding: 5px;
margin: 5px;
height: 50px;
width: 120px;
text-align: center;
line-height: 50px;
color: #fff;
background: #2f3036;
text-decoration: none;
border-radius: 30px 30px 0 0;
}
如何包含浮动
浮子会从它们所包含的元素中突出出来。这是设计上的问题。我们这样做是什么意思？想想看，一个图片在包裹的
标签内。如果没有其他文本或内容给
标签一些高度，那么图像就会悬挂在该元素之外。这个例子显示了我们的意思。
html
<body>
<div class="container">
<p><img class="lake" src="lake.png" width="300"></p>
</div>
</body>
css
img {
float: left;
}
我们实际上想要的是让包装元素完全包含浮动的图像。要解决这个问题，只需在包装元素或包含元素上添加overflow:auto即可。
p {
overflow: auto;
}
使用浮动的两列
浮动通常用于页面布局的整个部分。让我们来设置一个使用浮动的两列布局，进行一些练习。我们可以从这个基本标记开始。
html
<body>
<div class="container">
<section>
<img src="design.png" width="170">
Lorem ipsum dolor sit, amet consectetur adipisicing elit...
</section>
<section>
<img src="dunes.png" width="170">
Lorem ipsum dolor sit, amet consectetur adipisicing elit...
</section>
</div>
</body>
这是很基本的。我们有两个
元素，它们只是相互堆叠在一起。现在我们可以把它变成两栏式布局。css
section {
float: left;
width: 45%;
}
仅仅是这个简单的小补充，我们就看到布局从堆叠式变成了一栏式，看起来非常漂亮
使用CSS定位元素
我们花了大量的时间来研究html中的流程和页面渲染以及浮动的问题。这是因为如果我们不了解这两个概念的工作原理，那么我们就会在使用.NET定位元素方面陷入泥潭。 static, relative, absolute, **fixed**和 **inherit**值来定位元素。当定位元素时，它们可以相对于它们在流程中正常出现的位置进行定位，或者完全从流程中取出，放在网页上的一个特定位置。所有这些都是通过 **position**属性来完成。
静态定位
在默认情况下，网页上的所有元素都在使用 **position:static**甚至不需要指定它。这是正常的定位方法，也是正常的文档流程中使用的方法。有可能，你永远不需要指定position:static。
相对位置
如果你把 position:relative到一个元素，它所做的就是允许你将这个盒子精确地偏移到顶部、右侧、底部或左侧，相对于它在文档流中的原始位置，它的位置是一个给定的量。该元素原本占据的空间被保留下来，并继续对周围内容的布局产生影响。
为了演示相对位置技术，我们将使用以下标记。我们把
元素的浮动去掉，这样它们现在就可以相互堆叠。我们还为包裹的div指定了一个宽度，并将margin设置为auto，这样我们的元素就会在页面的中心位置排列。html
<html>
<head>
<title>CSS Positioning Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<section class="one">
<img src="berries.png" width="200">
Lorem ipsum dolor sit...
</section>
<section class="two">
<img src="forest.png" width="200">
Lorem ipsum dolor sit...
</section>
<section class="three">
<img src="fish.png" width="200">
Lorem ipsum dolor sit...
</section>
</div>
</body>
</html>
css
section {
border: 2px solid lightblue;
padding: 10px;
margin: 3px;
}
img {
float: left;
padding-right: 10px;
}
.container {
width: 500px;
margin: auto;
}
我们现在要做的是给第二个
应用一个position:relative，这样我们就可以将它相对于它在文档流程中通常出现的位置移动。下面这个CSS说的是将从它通常出现的位置向左偏移100像素。这样做的效果是将向右移动100像素。section.two {
position: relative;
left: 100px;
}
你也可以通过从右边偏移来把它移到左边。
section.two {
position: relative;
right: 100px;
}
如果我们设置顶部或底部的偏移，内容就会开始重叠，但你会明白这是如何工作的。值得注意的是，当你对一个元素使用position:relative时，它并没有从正常的文档流中移除。该元素仍然在文档中占据原来的位置，只是在视觉上偏移给了终端用户。如果你想在整体布局中简单地调整一个元素，那么相对位置是非常好的。
考虑到这三个部分现在又回到了浮动布局，我们有三列。我们现在可以用这个CSS在垂直方向上创造一个整洁的偏移效果。
section.two {
position: relative;
top: 40px;
}
section.three {
position: relative;
top: 80px;
}
关于相对定位，需要记住的关键点是。
- 元素保持在正常的文档流程中
- 文档中的原始空间被保留下来
- 当你移动元素时，要注意重叠的内容。
绝对定位
该 **position:absolute**值使元素脱离了正常的文档流。这意味着该元素可以被放置在设计师选择的网页上的任何地方。绝对定位可能是各种定位方法中最常用和最通用的一种。绝对定位的元素将继续随页面滚动。该 **position:absolute**值最常被用在一个元素上，它的父级元素的定位设置为position:relative。这有点令人困惑，让我们看一个例子。
我们将从一个
元素，像这样。
html
<html>
<head>
<title>CSS Positioning Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div id="banner">
<img src="friends.png" width="100%">
<h1>Hanging Out With Friends</h1>
</div>
</div>
</body>
</html>
有了这个例子，我们的目标是将
的标题定位到与图片绝对重叠的位置，使其具有很酷的横幅效果。这几乎就像文本本身就是横幅的一部分。这是一个两步的过程。首先，我们将position:relative指定给我们想要绝对定位的元素的父元素。所以
的父元素是id为#banner的div。一旦这一点到位，我们就以
本身为目标，应用 position:absolute.
#banner {
position: relative;
}
h1 {
position: absolute;
bottom: 10px;
left: 140px;
}
看起来很不错!绝对定位的元素与包含块一起工作。由于绝对定位会发生重叠，你可以利用z-index来调整页面上元素的堆叠顺序，以获得你所期待的结果。所以用绝对定位，我们可以记住。
- 该元素被带出了正常的文档流程
- 文档中的原始空间不再被保留
- 通常会和一个位置相对的父元素一起使用
固定位置
位置固定就像把一个元素直接粘在屏幕上。换句话说，即使用户滚动页面，该元素也会固定在窗口中的一个位置。当然，这意味着固定元素脱离了正常的文档流程，只相对于浏览器窗口本身进行定位。固定定位可能会给你带来麻烦，所以要小心使用它。然而，你可能会看到固定定位的一个用途是一个固定的导航栏。让我们来看看这个例子。
这里是HTML，现在在页面顶部附近有一个导航区。
<html>
<head>
<title>CSS Positioning Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</nav>
<div class="container">
<section>
<img src="beach.png" width="200">
Lorem ipsum dolor sit...
</section>
<section>
<img src="berries.png" width="200">
Lorem ipsum dolor sit...
</section>
<section>
<img src="building.png" width="200">
Lorem ipsum dolor sit...
</section>
<section>
<img src="cave.png" width="200">
Lorem ipsum dolor sit...
</section>
<section>
<img src="city.png" width="200">
Lorem ipsum dolor sit...
</section>
<section>
<img src="concert.png" width="200">
Lorem ipsum dolor sit...
</section>
<section>
<img src="design.png" width="200">
Lorem ipsum dolor sit...
</section>
<section>
<img src="lake.png" width="200">
Lorem ipsum dolor sit...
</section>
<section>
<img src="fish.png" width="200">
Lorem ipsum dolor sit...
</section>
<section>
<img src="friends.png" width="200">
Lorem ipsum dolor sit...
</section>
</div>
</body>
</html>
我们的目标是让这个导航栏粘在页面的顶部，无论如何都是可见的，甚至在滚动的时候也是如此。要做到这一点，我们可以给导航指定一个固定的位置，然后把顶部设置为零，把左边设置为零。这就有效地将这个导航菜单固定在了页面的顶部，并且在滚动过程中它将继续可见。这是一个固定位置的常见使用情况。
css
nav {
width: 100%;
background-color: #333;
padding: 20px;
position: fixed;
top: 0;
left: 0;
}
nav li {
list-style-type: none;
margin: 0 10px;
color: white;
float: left;
}
ul::after {
display: block;
content: "";
clear: both;
}
你能不能看一下这个？我们的导航栏被固定在页面顶部的一个固定位置上。非常好
总而言之，固定定位有这些特点。
- 该元素被从正常的文档流中移除
- 固定元素的偏移值总是相对于视口而言的
- 即使在网页滚动时，该元素也能保持位置
CSS定位教程总结
本教程让我们了解了元素是如何通过文档流在网页上呈现的。通过使用浮动和清除，元素可以被移除并重新插入到流程中。我们还可以对元素进行定位，如相对、绝对和固定，以更精确地影响元素在页面上的放置方式和位置。有了这些基于CSS的布局知识，你就可以把它们应用于各种网页设计和页面模板。
