这篇文章给大家分享的是有关CSS中普通流、浮动和绝对定位怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

CSS 定位和浮动
CSS 定位属性允许你对元素进行定位。
CSS 为定位和浮动提供了一些属性，可以建立列式布局，将布局的一部分与另一部分重叠。
定位允许你定义元素框相对于其正常位置、父元素、另一个元素甚至浏览器窗口本身的位置。
另一方面，CSS1 中首次提出了浮动，浮动不完全是定位，不过，它当然也不是正常流布局。

一切皆为框
div、h2 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
而 span 和 strong 等元素称为“行内元素”，因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性改变生成的框的类型。
通过将 display 设置为 block，可以让行内元素（比如 <a>）表现得像块级元素一样。
通过把 display 设置为 none，让该框及其所有内容都不再显示，不占用文档中的空间。
但是在一种情况下，即使没有进行显式定义，也会创建块级元素，例如 div 的开头：

<div>sometext<p>Somemoretext.</p></div>

注释：即使没有把这些文本定义为段落，它也会被当作段落（块级元素）对待。
注释：在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
提示：无法直接对无名块或行框应用样式，因为没有可以应用样式的地方。

CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
通常，所有框都在普通流中定位。即普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。
注意：行框与行内框是两个概念，行框（Line Box）的高度总是足以容纳它包含的所有行内框。

CSS position 属性
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static：元素框正常生成。块级元素和行内元素分别生成框，作为文档流的一部分。
relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute：元素框从文档流完全删除，并相对于其包含块定位（生成一个新的块级框）。
fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

相对定位 relative

<html><head><styletype="text/css">h3.pos_left{position:relative;left:-20px}h3.pos_right{position:relative;left:20px}</style></head><body><h3>这是位于正常位置的标题</h3><h3class="pos_left">这个标题相对于其正常位置向左移动</h3><h3class="pos_right">这个标题相对于其正常位置向右移动</h3><p>相对定位会按照元素的原始位置对该元素进行移动。</p><p>样式"left:-20px"从元素的原始左侧位置减去20像素。</p><p>样式"left:20px"向元素的原始左侧位置增加20像素。</p></body></html>

注释：本例演示如何相对于一个元素的正常位置来对其定位。

绝对定位 absolute

h3.pos_abs{position:absolute;left:100px;top:150px}

注释：本例演示如何使用绝对值来对元素进行定位。

固定定位 fixed

p.pos_fix{position:fixed;left:5px;top:5px;}

注释：本例演示如何相对于浏览器窗口来对元素进行定位。

元素内容溢出 overflow
overflow 属性定义溢出元素内容区的内容会如何处理：
visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承 overflow 属性的值。
如果元素中的内容超出了给定的宽度和高度属性，将会使用到 overflow 属性。

<html><head><styletype="text/css">div{background-color:#00FFFF;width:150px;height:150px;overflow:scroll;}</style></head><body><div>overflow属性可以确定是否显示滚动条等行为。这个属性定义溢出元素内容区的内容会如何处理，默认值是visible。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。</div></body></html>



设置元素的形状

<html><head><styletype="text/css">img{position:absolute;clip:rect(0px50px200px0px)}</style></head><body><p>clip属性剪切了一幅图像：</p><p><imgborder="0"src="../book.gif"width="120"height="151"></p></body></html>

注释：本例演示如何设置元素的形状。此元素被剪裁到这个形状内，并显示出来。

垂直排列图象

<html><head><styletype="text/css">img.top{vertical-align:text-top}img.bottom{vertical-align:text-bottom}</style></head><body><p>图像<imgclass="top"border="0"src="../cute.gif"/>位于段落中。</p><p>图像<imgclass="bottom"border="0"src="../cute.gif"/>位于段落中。</p></body></html>

注释：本例演示如何在文本中垂直排列图象（顶部对齐、底部对齐）。

Z-index

<html><head><styletype="text/css">img.x{position:absolute;left:0px;top:0px;z-index:-1}</style></head><body><h2>这是一个标题</h2><imgclass="x"src="../mouse.jpg"/><p>默认的z-index是0。Z-index-1拥有更低的优先级。</p></body></html>

注释：Z-index可被用于将在一个元素放置于另一元素之后。

<html><head><styletype="text/css">img.x{position:absolute;left:0px;top:0px;z-index:1}</style></head><body><h2>这是一个标题</h2><imgclass="x"src="../mouse.jpg"/><p>默认的z-index是0。Z-index1拥有更高的优先级。</p></body></html>


CSS 定位 属性及描述
position：把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top：定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right：定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom：定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left：定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow：设置当元素的内容溢出其区域时发生的事情。
clip：设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align：设置元素的垂直对齐方式。
z-index：设置元素的堆叠顺序。

感谢各位的阅读！关于“CSS中普通流、浮动和绝对定位怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！