HTML中子元素margin-top属性影响父元素的bug解决方案

196 阅读1分钟

如图所示。在HTML中 子元素添加margin-top 属性时会影响父元素的margin值,解决方案有三种。

解决方案一:

父元素或者子元素 添加 float浮动属性

这种方法容易引起另外的bug

例如父元素添加float属性时的 文档流层级会增加 ,

会覆盖到未添加float 属性的块级元素上方。

关于文档流模型 我们下次再详细说明。

如图所示会出现这样的bug.

解决方案二:

给父元素添加 border

解决方案三:

给父元素添加属性 overflow-hidden 属性

这种方法在特定情况也也会造成不便

列入 导航栏的二级导航,如果添加这种属性 ,二级导航可能无法显示。