浮动布局
定义浮动
float 属性
float CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）
代码示例
float:right
清除浮动
clear 属性
clear CSS 属性指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。
代码示例
float:left;
定位属性
设置定位方式
position 属性
CSS position 属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。
代码示例
position:relative;
left:-20px;
/* 这个标题相对于其正常位置向左移动 */
设置元素位置
代码示例
<style>
.box {
width: 300px;
height: 200px;
border: 1px solid #0000FF;
position: relative;
}
.box span{
position: absolute;
right:20px;
bottom:20px;
}
</style>
<div class="box">
<span>2023 年 3 月 26 日 </span>
</div>
设置堆叠顺序
z-index 属性
CSS z-index 属性设置定位元素及其后代元素或 flex 项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。
代码示例
<style>
img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
<h2> 一场说走就走的旅行 </h2>
<img src="1.jpg">
© 版权声明
THE END
