CSS定位和浮动_css浮动和定位-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_50555031/article/details/124891690

本文详细介绍了CSS中的定位技术，包括相对定位和绝对定位。相对定位允许元素在其原始位置基础上偏移，而不影响其他元素；绝对定位则将元素从正常文档流中移除，相对于最近的非静态定位祖先元素进行定位。此外，还阐述了浮动的概念，浮动元素会脱离普通流并左右移动，直到碰到边界。浮动排序规则和清除浮动的方法也进行了说明，展示了如何通过浮动实现图文混排和布局调整。示例代码演示了浮动效果在图片库布局中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、CSS定位

CSS 定位 (Positioning) 属性允许你对元素进行定位

CSS定位分为相对定位和绝对定位

相对定位：设置为相对定位的元素框会偏移某个距离，元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

绝对定位：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

二、浮动

使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动属性：用float属性，它的属性值有两个，为right和left两个属性值。

left：左浮动
right：右浮动

1、使用浮动的规则

浮动元素的左外边界不能超出其包含块的左内边界，右亦然
防止元素彼此覆盖，浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(右浮动)元素的右(或左)外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
浮动元素的左外边界必须是源文件中之前出现的左浮动元素的右外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
左浮动元素的右外边界不会出现在其右边右浮动元素的左外边界的右边。
一个浮动元素的顶端不能比其父元素的内顶端更高
浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高
如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
浮动元素不能超出其包含元素的边界。左(或右)浮动元素的左(或右)边有另一个浮动元素，前者的右外边界不能在其包含块的右(或左)边界的右(或左)边。如果没有足够的空间，浮动元素会被挤到一个新的“行上”
浮动元素必须尽可能高地放置。即满足其他约束条件的前提下，浮动得尽可能高。
左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远

2、浮动的排序规则

相同方向的浮动元素,先浮动的显示在前面，因为浮动只会盖住标准流
不同方向的浮动元素,左浮找左浮,右浮找右浮
浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来决定
贴靠现象: 如果浮动的最后一个元素超过了父元素的宽度,会自动找上一个元素贴过去,如果宽度还是不够,继续找上一个~如果父元素宽度还是不够的话,那就只能凑合呆着了
图文混排

3、清除浮动

给前面一个父元素设置高度(在开发中最好不要设置高度,所以此方便不建议使用)
给后边的元素设置clear属性,(注意添加clear属性后margin属性就会失效)
隔墙法
- 外墙法
  
  中间加个块级元素并设置clear: both (注意: 可以在第二个盒子使用margin-top,但是第一个盒子不能使用margin-bottom,所以一般既不设置第一个盒子的margin-bottom,也不设置第二个盒子的margin-top,而是直接设置额外块级元素的高度)
- 内墙法
  
  块级元素写到第一个盒子最后面并设置clear: both(注意: 第一个盒子可以使用margin-bottom,第二个盒子也可以使用margin-top.额外块级元素也可以设置高度)
- 区别: 内墙法可以撑起第一个盒子的高度,而外墙法不可以.(改方法同样不建议使用,因为添加了额外的元素)

三、浮动实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>浮动实例</title> 
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
.text_line
{
	clear:both;
	margin-bottom:2px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>

运行结果：