脱离标准文档流 影响 规范
浮动导致父级盒子塌陷,解决方式:
1.父级盒子价高(不能自己撑开,高固定)
2.父级盒子加overflow: hidden (自动撑开 但会导致溢出的部分无法显示)
3.加一个空盒子(属性值:clear:both) 必须无意义 无宽高
4.父盒子加伪类属 ::after{content:"" display:block clear:both} 添加无意义空盒子的效果且不受影响
定位
相对定位
绝对定位
设置堆叠顺序的
固定定位
粘性定位
脱离标准文档流 影响 规范
影响: 1.破坏了布局,导致布局错乱
2.文字不会脱离(不脱离文本流)
规范:同级之间,一个加float 其余也加
<style>
*{
margin: 0;
padding: 0;
}
ul{
border: 10px solid yellow;
/* 1.父级盒子价高(不能自己撑开,高固定) */
/* height: 100px; */
}
li{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
list-style: none;
}
</style>
</head>
<body>
<ul class="clear">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
父级盒子加overflow: hidden (自动撑开 但会导致溢出的部分无法显示)
ul{
border: 10px solid yellow;
/* 2.父级盒子加overflow: hidden (自动撑开 但会导致溢出的部分无法显示) */
overflow: hidden;
}
加一个空盒子(属性值:clear:both) 必须无意义 无宽高
<ul class="clear">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<!-- 3.加一个空盒子(属性值:clear:both) 必须无意义 无宽高 -->
<div style="clear: both;"></div>
</ul>
父盒子加伪类属 ::after{content:"" display:block clear:both} 添加无意义空盒子的效果且不受影响
/* 父盒子加伪类属 ::after{content:"" display:block clear:both} 添加无意义空盒子的效果且不受影响 */
.clear::after{
content: "";
display: block;
clear: both;
}
定位
相对定位
相当于自身定位
position: relative;
绝对定位
1.相对浏览器窗口定位
position: absolute;
top: 0;
left: 0;
2.如果父盒子有定位属性 那么就相对父盒子相对
子绝父相 子类加绝对定位 那么父盒子要有相对定位属性
逐级向上找 相对碰到第一个有定位属性的父盒子定位 如果都都没有 那就相对浏览器定位
position: absolute;
设置堆叠顺序的
.默认为z-index: 1 数字越大越靠前显示
z-index: 1;
固定定位
不管页面如何滚动 他都永远固定在那里 相对浏览器窗口定位
position: fixed;
粘性定位
最初被当作relative 相对于原来的位置进行偏移 一旦超过阙值 会被当做fixed定位
position: sticky;