CSS中越界问题的经典如何解决方案【推荐】

春季是一个富有生命力季节,也是一个美丽、神奇,充满希望季节。柳树枝条向下垂着,就似一条条线挂树上。春季景色十分美丽,就似一幅栩栩如生画。

CSS相关知识

(1)如何解决父元素的第一个子元素的margin-top越界问题

1)为父元素加border-top: 1px;——有副作用

2)为父元素指定padding-top: 1px;——有副作用

3)为父元素指定overflow:hidden;——有副作用

4)为父元素添加前置内容生成——推荐使用

CSS Code复制内容到剪贴板
  1. .parent:before{
  2.     content:'';
  3.     display:table;
  4. }

(2)如何解决所有的子元素浮动后父元素高度变为0,且影响后续元素

1)为父元素指定overflow:hidden;——有副作用

2)为父元素指定高度:height: xxx;——有局限性

3)为父元素添加后置内容生成——推荐使用

CSS Code复制内容到剪贴板
  1. .parent:after{
  2.       content:'';
  3.       display:table;
  4.       clear:both;
  5. }

以上这篇CSS中越界问题的经典解决方案【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例

CSS浮动引起的高度塌陷问题