页面布局margin越界和float引起的影响常用的css套路

原创于 2017-05-11 13:12:09 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #css

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了使用CSS解决两个常见的布局问题：一是防止子元素的margin导致的父元素高度塌陷；二是清除浮动对父元素及后续元素的影响。通过简单的:before和:after伪元素应用，可以有效地解决这些问题。

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

话不多说，直接上

1.防止子元素的margin越界

     .parent:before {
                       content: '  ';
                      display: table;
         }
         其他办法还有:
         父元素设置padding-top；
         父元素设置边框;
         父元素设置overflow:hidden;等

2.清除子元素的浮动对父元素及后续元素造成的影响

    .parent:after {
         content: '  ';
         display: table;
         clear: both;
     }