一、浮动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) 要配合定位属性使用
