HTML和CSS笔记03 高度塌陷和BFC定位

HTML和CSS笔记03

1.高度塌陷和BFC
子元素浮动后，父元素高度无法由子元素撑开
特点：
1.不会被浮动元素覆盖
2.子元素与父元素不存在布局重叠
3.开启BFC后可以包含子元素

//父元素开启BFC
//不推荐（宽度消失）
float：left;
display:inline-block;

overflow:auto//或者hidden不用visible

clear:left//消除其它元素左浮动的影响
clear:both//消除两侧中最大影响的元素

//高度塌陷，外边距重叠代码！！
.clearfix::before,.clearfix::after{
	content:'';
	display:table;//高度塌陷，外边距重叠
	clear:both;
}

2.定位

/*相对定位position
*static：默认值，不开启定位。
*relative:开启相对定位（相对于自己的原位置）
*fixed:固定位置
*absolute:开启绝对定位
*sticky:粘滞定位
*/
//相对位置提升了元素的层次，不会改变性质，不脱离文档
position:relative;
left:100px

/*绝对定位absolute
*从文档流脱离
*改变性质，行内变成块
*提升一个层次
*绝对定位元素相对于包含块（最近祖先块）。如果没有，则相对于根元素
*/
position:absolute;
left:100px

/*固定位置fixed
*全部同absolute，但不同：参照于浏览器的视口
*网页上固定不动，不随滚动条滚动
*/
position:fixed;

/*sticky:粘滞定位
*不兼容IE
*到达某位置固定位置不动
*属性设置同相对定位
*/
position:sticky;
top:10px//最后停在浏览器的视口下10px不随滚动条滚动

//水平/垂直居中在绝对位置中
margin-left:auto;
margin-right:auto;
left:0;
right:0

//开启了定位
z-index:3;//值越大层次越高
//若没有指定，则默认div靠网页下的位置
//后代元素高于祖先元素