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;}