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(也可以设置边框)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,806评论 1 92
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 966评论 0 2
  • 一、在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 在CSS当中,相...
    dengpan阅读 603评论 0 0
  • 1.解决margin叠加问题 三P每个p之间的距离为50px,发生了外边距叠加。 要解决这个叠加问题即让每个P之间...
    岁月帮凶ds阅读 516评论 1 0
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 901评论 0 4