当前位置: 首页 > Web前端 > CSS

【css】块格式化上下文(BFC)

时间:2023-03-30 22:07:14 CSS

定位方式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防止元素被浮动元素覆盖,避免边距重叠

.item{width:300px;高度:100px;边距:100px;background-color:aquamarine;}两个元素的外边距都是100px,上下间距应该是200px,结果是100px,上下边距重叠,
.item{width:300px;高度:100px;边距:100px;background-color:aquamarine;}.container{overflow:hidden;}分别在两个元素上包裹一个容器,触发BFC,BFC上下边距不重合。上面已经介绍了clearfloating,解决父级高度塌陷的问题,防止浮动元素覆盖前面介绍过,浮动元素后面的块级元素会被浮动元素覆盖,这样这个块级元素就可以触发BFC,添加overflow:hidden.item1{width:100px;高度:100px;向左飘浮;背景颜色:海蓝宝石;}.item2{宽度:300px;高度:300px;高度:300px;背景色:#dede;溢出:隐藏;}