一、浮动float——浮动是会使盒子脱离文档流
添加了浮动的元素
1.原本的位置不占用 脱离文档流
2.设置了浮动 就不支持auto自适应居中
3.文字会感受到浮动 跟着进行文字环绕效果 而不是浮动元素覆盖文字 文字和浮动处于同一层的关系
4.可以使行内元素支持 高宽设置 也支持上下外边距
5.可以按照自己设置 方向来进行移动
写法: 选择器{
float:属性值;
}
1.默认值: 没有浮动 none
2.left 元素向左浮动
3.right 元素向右浮动
/* 元素向左浮动 */
/* float: left; */
/* 元素向右浮动 */
float: right;
清楚浮动样式：
常用于解决父级高度塌陷问题:父级盒子不设置高度，默认是由里面的子级撑开，但是子级设置了浮动元素，浏览器在计算高度时不会把添加了浮动元素的子元素算进去 。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap{
width: 1000px;
/* height: 500px; */
/* overflow: hidden; */
background-color: skyblue;
}
.box1{
float: right;
width: 300px;
height: 300px;
background-color: green;
}
.box2{
float: left;
width: 350px;
height: 400px;
background-color: pink;
}
.box3{
float: left;
/* float: right; */
width: 350px;
height: 450px;
background-color: red;
}
.footer{
width: 1000px;
height: 500px;
background-color: purple;
}
.clear{
/* 清除浮动样式 */
/* clear: left; 清除左浮动 */
/* clear: right; */
/* 同时清除左右浮动 */
/* clear: both; */
}
/* 用伪元素清除 wrap盒子的浮动 */
.wrap::after{
/* 开启伪元素 key */
content: '';
/* 伪元素是行内元素 变成块级元素 */
display: block;
/* 同时清除左右浮动 */
clear: both;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">左侧盒子</div>
<div class="box2">中间盒子</div>
<div class="box3">右侧盒子</div>
<!-- 清除浮动样式 -->
<div class="clear">
</div>
</div>
<div class="footer">
俺是底部内容盒子
</div>
</body>
</html>实现效果：
二、定位样式——position
1. 相对定位 position: relative;
a.不会脱离文档流 以自身左上角的位置来进行移动 原本的位置会继续保留
b.需要通过方位值来移动
c.不会影响元素自身 给块级元素设置相对定位 是支持auto自适应居中
/* 相对定位 */
position: relative;
2. 绝对定位
a.脱离文档流 原地起飞
b.参考位置 以最近一个父级定位属性来移动 (如果说找不到最近的一个定位父级 那就找body 祖先元素 )
c.绝对定位 一般配合相对定位来使用 来达到一个 子绝父相 (父相子绝)的效果 子级是绝对定位 父级是相对定位 子级去参考 父级的相对定位来移动
d.可以让行内元素支持高宽 元素高宽默认不写为0 暂时不支持 auto自适应居中 (单独写不生效)
/* 绝对定位 */
position: absolute;
3. 固定定位 position: fixed;
a.脱离文档流 参考位置是以浏览器窗口为准 来进行移动
b.使用方位值来移动 生效
c.margin:auto 失效
/* 固定定位 */
position: fixed;
4. 粘性定位 position: sticky;
/* 粘性定位 */
position: sticky;
快速让子级盒子 在父级盒子里面 水平居中效果:
<!-- 给子级设置 -->
/* 第一种方法 */
/* position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto; */
/* 第二种 */
/* position: absolute;
left: 50%;
top: 50%; */
/* 负自身宽度的一半 */
/* margin-left: -100px; */
/* 负自身高度的一半 */
/* margin-top: -100px; */
/* 这个写法相对于第二种 简写 优化写法 */
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 100px);
5.定位层级 z-index 解决同级定位元素的覆盖问题 数字越大 越优先显示
- 取值 数字越大越优先 默认值是 0/auto auto: 指的是你没写值
- z-index 层数只允许写了定位属性元素使用
注意点: 方位值(left top right bottom ) 和 定位层级(z-index) 要配合定位属性使用
标签：浮动,定位,float,样式,前端,元素,position,left From： https://blog.csdn.net/qq_53256193/article/details/142419972