前端复习之标准流可能问题以及解决方法

文档流：文档中可显示对象在排列所占用的空间和位置

标准流：是页面默认的文档流

标准流可能带来的问题：1.高矮不齐，底边对齐（例如当文字和图片占同一行时，图片过大会导致文字与图片底边对齐)

                                        2.空白折叠：无论多少个空格，tab都会折叠为一个空格，图片与图片会有间隙

设置浮动：float:left/right,可以解决图片间隙问题，注意浮动会脱离文档流，在大盒子里塞多个小盒子设置浮动后如果宽度不够，多余的小盒子会挤到下一行

注意：浮动也可能带来的问题：1.造成父元素高度塌陷，例如往大盒子只塞小盒子，给小盒子设置浮动，此时大盒子高度为0

                                                   2.对后续元素会造成影响

浮动问题的解决方案：给父级元素添加clear：both;overflow:hidden属性,并给受影响的元素添加clear:both属性

定位：position:relative/fixed/absolute设置这个属性后可以设置left，right，top，bottom来调整上下左右的距离，其中fixed和absolute会脱离文档流，(注意：每设置一个absolute都会多一层流，浮动最多两层)绝对定位默认默认会以顶层文档作为定位，我们可以给父级元素设置relative让fixed以父级元素作为定位，z-index给absolute设置层流优先级，值越大，层流越往上