造成的原因：父级元素没有高度，子级元素含有浮动属性

        父级元素没有高度 =>自适应

        子级元素含有浮动 =>新闻列表

解决方法

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绑定使用。