清除上外边距溢出和浮动对父元素宽度的影响

上外边距溢出:
父元素没有边框border,子元素设置了上外边距,此时就会出现上外边距溢出,本该子元素设置了上外边距,结果却是没有体现出来,反而父元素上多了子元素设置的上外边距
简易时尚的解决方案
在父元素添加类clearmargin-top

.clearmargin-top::before{
        content:"";
        display: table;
    }

浮动对父元素宽度的影响
子元素设置了浮动,父元素没有设置固定宽度,此时就会出现父元素高度坍塌,不被撑开的现象。
简易时尚解决方案
在父元素添加类clearfloat

.clearfloat::after{
        clear: both;
        content:"";
        display: block;
    }

以免其他因素的干扰,开始写网页的时候应该对这边距和浮动初始化,margin:0;float:none;

有疑惑的小伙伴留言一起学习吧

猜你喜欢

转载自blog.csdn.net/weixin_44494811/article/details/86594061
今日推荐