喂喂喂!大家不要生气嘛,生气会犯嗔戒的。悟空你也太调皮了, 我跟你说过叫你不要乱扔东西,你怎么又……你看,我还没说完你就把棍子给扔掉了! 月光宝盒是宝物,你把它扔掉会污染环境,要是砸到小朋友怎么办,就算砸不到小朋友, 砸到花花草草也是不对的。

BFC的示例分析

上图中,文字围绕着浮动元素排列,不过在这里,这显然不是我们想要的。此时我们可以为.box2元素的样式加上overflow:hidden;使其建立一个BFC,让其内容消除对外界浮动元素的影响

BFC的示例分析

这个方法可以用来实现两列自适应布局,效果不错,此时左边的宽度固定,右边的内容自适应宽度。如果我们改变文字的大小或者左边浮动元素的大小,两栏布局的结构依然没有改变!

特性3:BFC可以包含浮动----清除浮动

我们都知道浮动会脱离文档流,接下来我们看看下面的例子:




  
  
 

BFC的示例分析

由于容器内两个div元素浮动,脱离了文档流,父容器内容宽度为零(即发生高度塌陷),未能将子元素包裹住。解决这个问题,只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。

BFC的示例分析

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


名称栏目:BFC的示例分析
当前链接:http://csdahua.cn/article/gjsgpj.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯