1浮动问题

最新推荐文章于 2019-06-15 21:41:00 发布

weixin_30520015

最新推荐文章于 2019-06-15 21:41:00 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10963891.html

本文详细解析了块级元素在浮动及清除浮动时的行为变化，包括浮动引起的父元素塌陷现象，以及通过不同方法解决这一问题的具体策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、块级元素A及其内部的块级元素B的默认宽度是100%；A使用了float后，B的宽度为B实际需要的宽度，A的宽度由B决定；B使用了display:inline-block后，B的宽度为B实际需要的宽度，A的宽度仍为100%。
2、块级元素A不浮动，不设置宽高宽，其内部块级元素B浮动，会引发A塌陷。
3、清除浮动
情形：父元素不浮动，子元素浮动，引发父元素塌陷。
解决1：父元素也浮动
解决2：父元素固定高
解决3：父元素增加伪类元素，清除浮动
解决4：父元素overflow:hidden
解决5：父元素overflow:auto
解决6：父元素display:table
解决7：父元素内部最后增加一个空元素，样式为clear：both

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10963891.html