造成的原因：父级元素没有高度，子级元素含有浮动属性
父级元素没有高度 =>自适应
子级元素含有浮动 =>新闻列表
解决方法
1. 给父级元素设置高度
缺点：无法自适应高度
2. 给父级overflow：hidden 【设置文本溢出触发了BFC（格式化上下文）】
格式化上下文规则 ————浮动属性也参加高度计算
缺点：如果子级元素含有超出父级容器的部分会隐藏，破坏网页布局
3. 在最后一个子级元素添加一个任意标签（如div）给这个标签设置clear：both
原理：清除上方预留下的空间
缺点：会生成多余结构代码，代码错乱，并且样式容易冲突
4. 万能清除法
原理：同方法3
方法：在父级元素上添加clear-fix
clear-fix::after{
conter:"";
width:100%;height:0;
display:block;
clear:both;
overflow:hidden;
visibility:hidden;
}
伪元素
属性::after / before
写法： 属性::after/before{content:""}
注意： after和before一定要和content绑定使用。
