清除浮动(float)的影响介绍
发布时间：2016-06-07 09:07:09 作者：佚名 
我要评论
我要评论下面小编就为大家带来一篇清除浮动(float)的影响介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浮动会导致父元素塌陷如图：
解决办法：
父元素overflow：hidden，如图
末尾插入子元素clear，如图
为甚么，父元素overflow：hidden会解决塌陷问题？
来自知乎貘吃馍香的回答
overflow:hidden 的意思是超出的部分要裁切隐藏掉
那么如果 float 的元素不占普通流位置 普通流的包含块要根据内容高度裁切隐藏
如果高度是默认值auto 那么不计算其内浮动元素高度就裁切
就有可能会裁掉float 这是反布局常识的。
-----------------------------分割线-------------------------------------
如果了解BFC这个问题也就迎刃而解了，看看BFC怎么说的。
BFC布局规范中，计算BFC的高度时，浮动元素也参与计算
overflow：hidden会创建BFC。
为甚么，末尾插入子元素clear会解决塌陷问题？
看一下什么是清楚浮动这问题也可以迎刃而解
来自官方文档：
如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
ok，好的基础才会走的更远。
以上这篇清除浮动(float)的影响介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
原文地址：http://www.cnblogs.com/c-o-d-e/archive/2016/06/06/5565109.html
相关文章
- 清除浮动就是指解决浮动元素溢出容器的操作,其方法多种多样,这里我们来看最基本的一种:CSS的clear属性清除浮动的基本用法示例2016-07-07
- 下面小编就为大家带来一篇浅谈css清除浮动(clearfix 和clear)的用法，小编觉得挺不错的，现在就分享给大家，也给大家做个参考，一起跟随小编过来看看吧2023-05-12
- 下面小编就为大家带来一篇浅谈CSS中的clear清除浮动。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
- 这篇文章主要介绍了CSS清除浮动的方法详解,值得注意的是并不是每次单纯把浮动清除掉就可以解决相关问题,文中最后谈到的闭合浮动的方案也非常值得一试,需要的朋友可以参考下2016-05-30
- CSS的float浮动效果在一些情况下非常不稳定,控制不好的时候一般还是清除浮动为妙,这里我们就来看一下CSS浮动所差生的内容溢出问题及清除浮动的方法小结2016-05-30
- 下面小编就为大家带来一篇清除浮动的几种方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-12
最新评论