浮动的影响

 

1.对自身影响:浮动元素表现为块元素的效果,可定义w/h/p/m.

2.对父元素影响:若父元素未定义height,那么父元素将会发生"高度塌陷".(没有考虑父元素高度小于浮动元素的情况,因为我觉得这种情况下没设置浮动也算是"塌陷"了).

3.对兄弟元素影响:a)它的兄弟元素也是浮动元素:紧挨着或在两端

        b)兄弟元素不是浮动元素:经过测试发现,如果是一般浮动,那么兄弟元素就会占据其原来的位置,浮动元素脱离文档流,并覆盖其上.

         如果是img元素浮动并且其兄弟元素内容是文本,那么浮动元素不会覆盖在文字上,而是文字环绕在图片周围,这也是设计float这一属性的原始初衷

 4.对子元素影响:如果浮动元素没有定义height,width那么就会自适应包含子元素.

 

由此可见,浮动的影响奇葩,对布局的影响大,所以在使用了浮动之后,要尽量清除浮动.

原文地址:https://www.cnblogs.com/wincent98/p/7133711.html