html+css 浮动、清除浮动、什么是BFC？、如何开启BFC-Toy模板网

这篇具有很好参考价值的文章主要介绍了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;
        }