CSS如何清除浮动与BFC

这篇文章给大家分享的是有关CSS如何清除浮动与BFC的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联建站自2013年起，公司以网站设计、网站建设、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务，适用行业近百种。服务企业客户上千余家，涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格，为不同客户提供各种风格的特色服务。

BFC

BFC：块级格式化上下文

BFC的布局规则

• 内部的Box会在垂直方向，一个接一个地放置。

• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

• 计算BFC的高度时，浮动元素也参与计算。

• BFC的区域不会与float box重叠。

• 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 

如何创建BFC

1、 float 的值不是 none 。

2、 position 的值不是 static 或者 relative 。

3、 display 的值是 inline-block 、 table-cell 、 flex 、 table-caption 或者 inline-flex
4、 overflow 的值不是 visible

BFC的作用

1.利用BFC避免margin重叠。

2.自适应两栏布局

3.清除浮动。

清除浮动

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。

清除浮动的方法

1. 额外标签法

在最后一个浮动标签后，新加一个标签，给其设置clear：both；(不推荐)

优点：通俗易懂，方便

缺点：添加无意义标签，语义化差

    Left