ZG前端学习系统day05 2020-11-6

css标签的分类（按照其显示类型进行）
block （块级元素）
1 在不设置宽的时候 宽度等于父元素的宽度 ， 不设置高的时候 默认情况下 是0
2 可以设置宽高 和支持盒子模型的所有属性
3 独占一行
inline（内联元素）
1 宽高由内容进行决定的
2 不可以设置宽高 某些盒子的模型是不支持的
3 并不是独占一行 并排排列 存在间隙
inline-block
既有块的特性也存在内联的特性
浮动
float：left float：right
浮动的特点：
1.浮动后的元素脱离了文档流不占位置了
2.浮动后的元素类似于行内块元素可以设置宽高
3 如果不设置宽高他的宽高是由内容撑开的
浮动场景
让兄弟间的块元素在一排展示
浮动条件
1必须有父元素
2 兄弟元素都要浮动
浮动产生的问题：高度塌陷
解决

1 在尾部添加一个额外标签 并且使用clear：both
2 在父元素上添加overflow：hidden 等操作进行bfc规范
3after伪元素
：：after{
content：‘’；
display：block；
clear：both；}