html+css 浮动、清除浮动、什么是BFC？、如何开启BFC

浮动

介绍：

• 其实早期的浮动是用来文字环绕图片效果,但是后来发现浮动还可以设置页面布局问题

• 块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，可以使块元素脱离文档流

特点：

• 哪个元素设置浮动，哪个元素就会脱离文档流

• 如果给上边的元素设置浮动时，下边的元素就会跑到上边元素的位置上，上边元素会覆盖住下边的元素（原因是上面的元素已经脱离了文档流，不占据位置）

• 脱离文档流的元素，默认在父元素的顶部，不会超出父元素的内容

• 脱离文档流的元素不再区分块和行内，统一会变成行内块

• 无论浮动的元素是右还是左浮动，下面的元素都会默认朝左上角

• 如果父元素设置了padding,那么浮动的子元素不会超出padding以外

• 元素浮动主要就是为了元素之间在一行排列（页面布局问题）

• 浮动的元素并不是根据上下排列的顺序来设置左右浮动，每个元素可以任意设置浮动位置

• 如果上下元素都浮动了，他们就会按照顺序进行排列

• 如果上边有元素未设置浮动，下边设置浮动的元素会被挡住

清除浮动

clear属性

清除浮动，指定段落的左侧或右侧不允许浮动的元素

属性	描述
right	清除向右浮动的元素
left	清除向左浮动的元素
both	清除左右浮动的元素

方法一：额外标签法（w3c提出，不推荐）

是给最后一个浮动的元素后面添加一个空标签,给空标签设置clear属性清除浮动

原理：

额外标签法主要就是调整额外标签的自身，通过调整自身来使自己不要和浮动元素排列在一起。

缺点：

如果页面中出现很多的浮动，就需要添加很多空标签清除浮动，就会导致很繁琐，所以不推荐

方法二：给父元素添加overflow属性（不推荐）

给父元素添加overflow属性非visible属性值（auto、scroll、hidden）

缺点：

如果子元素内容过多会出现隐藏问题，或者页面布局发生改变，不常用此属性

方法三：给父元素设置after伪元素

伪元素创建的元素是行内元素

其实原理和额外标签法类似

        /*只写一个冒号是为了兼容其他浏览器不支持::*/     
      .clearfix:after {
            /*伪元素创建的元素是行内元素*/
            /*content值要加一个小点，为了防止低版本浏览器解析时出现空隙问题*/
            content: ".";
             /* 转化为块元素*/
            display: block;
            height: 0;
            /*隐藏content里面的小点*/
            visibility: hidden;
            /*清除浮动*/
            clear: both;
        }
            /*以下是为低版本浏览器做的适配*/
       .clearfix {
            *zoom: 1;
            /*  星号代表了只有ie6和ie7才会解析这段代码，zoom是ie6和ie7的清除浮动方法  */
        }

方法四：给父元素添加双伪元素after before （推荐）

 .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
            /*触发BFC*/
            clear: both;
        }

BFC

页面元素中的隐含属性：Block Formatting Context 即块格式化上下文，简称BFC

当开启元素的BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素

BFC 理解为一个封闭的大箱子，箱子内部的元素不会影响到外部。

开启BFC后，元素将会具有如下的特性：

1. 父元素的垂直外边距不会和子元素重叠

2. 开启BFC的元素不会被浮动元素所覆盖

3. 开启BFC的元素可以包含浮动的子元素（可解决高度塌陷）

如何开启元素的BFC：

1. 设置元素浮动（不推荐）

   • 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失

   • 而且使用这种方式也会导致下边的元素上移，不能解决问题

2. 设置元素为inline-block（不推荐）

   • 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式

3. 将元素的overflow设置为一个非visible的值 （推荐）

   • scroll、auto、hidden

4. 设置元素绝对定位

   • 元素也会脱离文档流，虽然可以撑开父元素，但是会导致父元素的宽度丢失

   • 而且使用这种方式也会导致下边的元素上移，不能解决问题

推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式