CSS清除浮动几种方式与BFC

清除浮动几种方式

解决问题：子元素都设置浮动，父元素没有设置高度，出现高度塌陷的问题。

一、万能清除法（推荐使用）

　　给父元素加上class=clear，并设置样式（写入公共样式中）

.clear:after{
    content:"";
    display:block;
    clear:both;
    
    height:0;
    overflow:hidden;
    visibility:hidden; /*处理浏览器兼容;*/
}
.clear{
    zoom:1;/*处理兼容*/
}

二、给父元素添加高度

　　缺点：无法做高度自适应布局；

三、父元素添加overflow属性

　　缺点：

overflow:hidden; /*遇到有定位设置的时候，定位超出的部分会隐藏；*/

overflow:auto；/*子元素超出的时候，会出现滚动条*/

四、在浮动元素下方添加盒子，并设置样式 clear:both；

　　缺点：代码冗余；

五、给父元素添加 float 属性

　　缺点：产生新的浮动问题；

六、给父元素添加display:table

　　缺点：产生新的未知bug；

BFC浅析

一、BFC触发条件

1、根元素（<html>）；
2、float值非none；
3、overflow值非visible；
4、display值为inline-block、table-cell、table-caption、flex、inline-flex；
5、position值为absolute、fixed；

二、BFC的特性

1、属于同一个BFC的两个相邻容器的上下margin会重叠；
2、计算BFC高度时浮动元素也参于计算（清除浮动原理）；
3、BFC的区域不会与浮动容器发生重叠（两栏布局等）；
4、BFC内的容器在垂直方向依次排列；
5、元素的margin-left与其包含块的border-left相接触；
6、BFC是独立容器，容器内部元素不会影响容器外部元素；

三、BFC功能总结

1、可以利用BFC解决两个相邻元素的上下margin重叠问题；
2、可以利用BFC解决高度塌陷问题；
3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）；

posted @ 2020-03-05 19:08 盼星星盼太阳阅读(212) 评论(0) 收藏举报

盼星星盼太阳