有关css浮动

浮动的特点

　　1.脱离文档流

　　2.浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或另一个浮动元素

　　3.会导致父元素高度坍塌

早期为实现文字环绕效果

清除浮动

一个常用的clearfix清除浮动方法：

.clearfix:before,//befor以解决现代浏览器上边距折叠的问题
.clearfix:after{
    display: table;//为啥一定要table，，block也可以，应该是要块级的
    content: ""
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;//zoom以支持IE6/7
}

BFC(Block Formatting Contexts 块状格式化上下文)

BFC的主要特征

　　1.BFC是页面上的一个独立的容器，容器内的子元素不会影响到外面的元素，外面的元素也不会影响到里面的子元素

　　2.盒子垂直方向的距离由margin决定，属于同一个BFC的相邻盒子的上下margin会发生折叠；分别触发两个元素的BFC，就可以解决垂直边距折叠的问题

　　3.BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题

BFC的触发方式

添加以下属性：

　　1.float 为 left | right

　　2.overflow 为 hidden | auto | scroll

　　3.display 为 table-cell | table-caption | inline-block | flex | inline-flex

　　4.position 为 absolute | fixed

所以可以给父元素设置 overflow: auto 来实现BFC清除浮动，但是为了兼容IE最好用 overflow: hidden 。但是这样阴影或者下拉菜单会被截断

IE6/7不支持BFC也不支持 :after ，所以清除浮动要靠触发 hasLayout

参考文章：

CSS 中的浮动和清除浮动，梳理一下！

如果要让我活

让我有希望的活

我从不怕爱错

只怕没爱过

浮动的特点

清除浮动

BFC(Block Formatting Contexts 块状格式化上下文)

相关推荐