1. 什么是父元素与子元素？
在CSS中，一个元素可以包含其他元素。我们把包含其他元素的元素称为父元素，被包含在内的元素则称为子元素。
父元素和子元素之间有一种特殊的关系，被称为包含关系。父元素会影响子元素的大小、位置和样式等属性，因为子元素通常是相对于父元素进行布局的。
2. 父元素如何限制子元素？
通常情况下，子元素不能超出其父元素的大小。如果子元素超出了父元素，就会出现溢出现象。比如，当一个容器中有太多的文本内容时，文本内容会溢出容器的边界。
为了限制子元素的大小，我们可以使用一些属性和技巧。
2.1. 使用overflow属性
CSS提供了`overflow`属性，用于设置容器元素的溢出内容的处理方式。
.container {
overflow: hidden;
}
当设置为hidden时，超出父元素的内容会被裁切掉，不会显示。其他的值包括visible、scroll、auto等。
2.2. 使用clip-path属性
`clip-path`属性可以裁切元素，显示出指定区域内的内容。
.container {
clip-path: inset(0);
}
这个属性的语法比较复杂，具体的用法可以参考MDN文档。
2.3. 使用position属性和负margin值
我们还可以使用`position`属性和负margin值来解决超出父元素的问题。
.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: -20px;
margin-top: -20px;
}
在这个例子中，我们将父元素设为相对定位，将子元素设为绝对定位，并在水平和垂直方向上居中。然后，我们使用负margin值来穿透父元素的边缘，并让子元素超出父元素。
3. 总结
以上是一些常用的方法，用来解决子元素超出父元素的问题。不同的情况下，我们可能会使用不同的方法。最终的解决方案要根据具体情况来定。
CSS是一个强大的工具，掌握好它可以让我们更加灵活地控制网页的布局和样式。