标准流
块级元素占据一行显示,行内元素在一行显示 ->元素按照原来的显示方式显示称为标准流
浮动的作用和用法
float 设置元素是否浮动或者如何浮动
none 不浮动
left 左浮动
right 右浮动
浮动的特点
1:浮动的元素不占据原来在标准流中的位置 (脱离标准流)
2:浮动可以让块级元素在一行上显示,让行内元素可以设置有效宽高 (本质上实现了模式的转换)
3:浮动的元素顶端对齐
清除浮动
浮动带来的影响:
所有的子盒子都浮动之后,导致父盒子对的高度为0,父盒子后面的盒子占据了父盒子原来的位置,子盒子漂浮到了父盒子后面的盒子上了
这个时候就需要清除浮动带来的影响了
清除浮动的方法
1:给父盒子设置高度
2:给父盒子设置overflow:hidden;
3:给父盒子的最后一添加一个盒子,这个盒子有个属性:clear:both;
4:使用伪元素清除浮动 (clearfix:after)
清除浮动的原理:
1:
给父盒子设置高度,直接把塌陷的高度补充回来
2:
overflow:hidden;触发了css里的BFC原理 BFC=block formatting context块级格式化上下文 (简单理解:设置overflow:hidden元素,里面的子元素就自成一个体系,不会受到外部的影响)
3:
clear:both隔断两边的浮动流
伪元素
:before为某个盒子添加子元素,这个子元素永远成为第一个子元素
:after 为某个盒子添加一个子元素,这个子元素永远成为最后一个子元素