BFC 应用

一、边距合并
当同时设置margin,在一个父容器里,渲染规则是类似的额的,有多个元素时,相邻元素边距会进行合并,用浮动后就不会合并
二、浮动的高度塌陷问题

float,inline-block,table-cell,overflow:hidden可以把包括的容器作为一个独立的区间与其他的容器进行区分(在一个块级格式化的容器里,每一个盒子的左边句都会挨着元素挨着块级元素的容器里,是从左到右,从上到下排列的)
形成BFC的方式display:inline-block或者overflow:hidden(auto),【一般情况下为避免对其他元素造成影响,副作用最小的是使用overflow:auo(hidden);所以一般有浮动的时候,可以设置oveflow】以把父容器撑开
IE让元素水平排列,第一个使用浮动,第二个是用inline-block.当内部元素浮动时,要让其父容器高度撑开,撑开方式让父元素形成BFC.伪类afer只能再IE8以上版本使用,为避免不支持,可设置overflow:hidden
zoom:1不进行放大缩小,也可清除浮动
代码:.clear:after{display:block;content:"";clear:both;} .clear{
zoom:1}
三、让文字环绕块级元素的方法
1、可以对文字设置,margin-left
2、可以对文字设置overflow:auto,形成一个BFC,即可从左到右排列
四、div的margin的折叠
为了不让相邻元素的边距合并,即不让div的margin折叠,可以在个元素外加个空的div,包括里面的内容,并让div/形成BFC既可overflow:quto(也可以设置边框)

你可能感兴趣的:(BFC 应用)