这篇文章给大家分享的是有关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;(不推荐)
优点:通俗易懂,方便
缺点:添加无意义标签,语义化差
LeftRight
2.父级添加overflow属性
通过触发BFC方式,实现清除浮动。(不推荐)
优点:代码简洁
缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素
Title LeftRight
3.使用after伪元素清除浮动(推荐使用)
优点:符合闭合浮动思想,结构语义化正确。
缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout。
Title LeftRight
4.使用before和after双伪元素清除浮动
优点:不仅可以清除浮动,也可以解决高度塌陷的问题(给父盒子添加类名clearfix)
缺点:用zoom:1触发hasLayout.
Title LeftRight
感谢各位的阅读!关于“CSS如何清除浮动与BFC”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
当前名称:CSS如何清除浮动与BFC
分享网址:http://scgulin.cn/article/iehihe.html