定位方式BFC1定位方式普通流/文档流浮动绝对定位1.1普通流/文档流规则元素按照其在HTML中的位置从上到下横向排列,行内元素横向排列,直到排满然后换行,块级元素会被渲染成一个完整的新行。默认情况下,所有元素都按正常流定位。1.2浮动规则元素先出现在正常流动的位置,然后根据浮动到容器边框的方向尽量向左或向右偏移,或者遇到另一个浮动元素时,父容器无法获取到高度脱离正常流的子元素的,元素的display属性会变为block之前的元素float:block:没有影响:cover,floatontopinline:followthefloatingelementinline-block:followingthefloatingelementwhenoverlappingblock:floatontop,blockcontentsurroundsthefloatingelementinline:floatbelowinline-block:floatbelow要清除浮动,使用theclearproperty//在parent之后添加一个空块.clear{clear:both}//使用伪元素添加一个空块.parent::after{content:"";显示:块;clear:both;}BFC.parent{overflow:hidden;}上面主要是针对父级的高度塌陷。可以给浮动的周边元素加上clear属性,清除浮动的影响。2BFC规则属于普通流,可以看作是一个渲染区域或者元素的一个属性——一个隔离的独立容器,不会影响其他元素浮动元素的高度也参与计算2.1触发BFC根元素浮动:notnoneposition:absolute,fixeddisplay:inline-block,inline-table,inline-flex,inline-grid,flex,table-caption,table,table-row,table-row-group,table-header-group,table-footer-group,flow-rootoverflow:不可见的块元素包含:layout,content,paintmulti-columncontainercolumn-count,column-width不是auto2.2避免overlappingmargins和clearfloating防止元素被浮动元素覆盖,避免边距重叠
