css标准流和浮动

标准流

块级元素占据一行显示,行内元素在一行显示   ->元素按照原来的显示方式显示称为标准流

浮动的作用和用法

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 为某个盒子添加一个子元素,这个子元素永远成为最后一个子元素