属性值: left right none
特点:
1.可以提升元素的层级关系。但是只是提升了半个层级(背景被盖住,文字就会被挤出来)
2.是设置为left/right当前元素就可以设置宽高和在一行显示
3.浮动会自动换行
4.浮动元素会去找离他最近的有浮动的元素进行贴边
5.如果没有其他浮动元素,那么会找父元素的边缘进行贴边
6右浮动会颠倒盒子顺序
浮动塌陷:
子元素浮动,父元素设置宽高,会出现高度撑不开的现象称之为父元素高度塌陷
解决浮动塌陷
1.给父元素添加宽高
2.给父元素添加overflow:hidden;(常用)
3.创建空标签,给标签添加clear;both;
4.给父元素添加::after伪元素
( opacity 透明度)
清除浮动
clear:left/right/both 左浮动/右浮动/两者都
position 定位
属性值;static静态定位 默认值
relative相对定位
absolute 绝对定位
fixed固定定位
sticky粘性定位
relative相对定位
1.提升了层级,但是不会让出原来的空间
2.相对于当前元素的左上角
absolute 绝对定位
1.添加绝对定位,让出原来的空间
2.添加left和top的时候,是从页面的左上角进行调整
3.脱离文档流,并且提升了层级,1层
absolute脱离了标准流的父元素;如果absolute有父元素并且添加position,那么就会相对于这个元素进行定位
fixed固定定位
1.让出原来的空间
2.相对于浏览器的窗口进行定位
3 top/bottom/left/right 用来固定位置