清除css float带来的影响的集中方式

css 布局的三种方式

1. 标准流：按照标签默认的特性摆放盒子（块元素纵向排列）
2. 浮动流：利用浮动摆放盒子(让块元素排成一行)
3. 定位流：利用定位摆放盒子

浮动流

1，浮动之后的元素会变成行内块(inline-block)
2，浮动元素不能覆盖文字
2，浮动之后的子元素，不占用标准流的空间，无法撑起父视图的高度

清除浮动带来的影响

a) 给父元素设置高度（不推荐，因为在项目中很多盒子是不固定高度的）
b 在父元素后设定空标签进行清除浮动

clear:both

c) 设定父元素的

overflow:auto

d) 使用伪对象代替空标签

div::after {
    content:""
    display:block
    clear:both
}这是建议的方式