028-86922220

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

CSS如何清除浮动与BFC

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

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

BFC

BFC:块级格式化上下文

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
    Right
    

2.父级添加overflow属性

通过触发BFC方式,实现清除浮动。(不推荐)

优点:代码简洁

缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素




    
    Title
    



    Left
    Right



3.使用after伪元素清除浮动(推荐使用)

优点:符合闭合浮动思想,结构语义化正确。

缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout。




    
    Title
    



    Left
    Right



4.使用before和after双伪元素清除浮动

优点:不仅可以清除浮动,也可以解决高度塌陷的问题(给父盒子添加类名clearfix)

缺点:用zoom:1触发hasLayout.




    
    Title
    



    Left
    Right



感谢各位的阅读!关于“CSS如何清除浮动与BFC”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


网页题目:CSS如何清除浮动与BFC
文章转载:http://www.tsicrk.com/article/iehihe.html
  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务

2.1967s