Is there any difference between clip property and overflow?

Prority clip:; allows you to specify a rectangle to cut out an absolutely positioned element. The rectangle is specified in four coordinates, all starting from the upper left corner of the element to be cut.

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}

The overflow:; property specifies what happens if the content overflows the "/ em box" container "of an element.

This property, when specified, is used to add scrollbars when the content of an element is too large to fit in a specified area or to cut / limit the contents of a box when using overflow:hidden; .

.elemento {
    width: 150px;
    height: 150px;
    overflow: scroll; /* adiciona automaticamente uma barra de rolagem/scroll ao elemento se o conteúdo for maior, dando a possibilidade de fazer scroll para ver o resto do conteúdo */
}

  

The only case where these properties work similarly is when using overflow:hidden; to crop images as you can see in this example below:

.clipImg {
    width: 100%;
    height: auto;
    position: absolute;
    clip: rect(0px,500px,200px,0px);
}
.clipOverflow {
    width: 500px;
    height: 200px;
    overflow: hidden;
}
.clipOverflow img {
    width: 100%;
}

<div class="clipOverflow">
    <img src="http://c1.staticflickr.com/1/624/32968186751_a913f86f82_c.jpg"></div><imgclass="clipImg" src="http://c1.staticflickr.com/1/624/32968186751_a913f86f82_c.jpg">

But as we can see in this example, while% literally clipped a portion of the image, already in clip we would have to work the code better to get this same effect of overflow:hidden; but in the end the concept is the same as using clip in this way. The image only looks more docked because we gave% color to the image to respect the container parent overflow:hidden; box.

• Is this a true statement?

No it is not. These properties even have a relationship to each other, but they control different things.

• What would these differences be?

clip: allows you to specify a rectangular area in which an image wider than container should be cut off.

Note that the position property must be absolute (absolute position).

Also note that this property does not work if overflow:visible

w3schools

overflow: specifies what happens when content overflows the box of the element that contains it. Depending on the value, the image can be cropped or show scroll bars.

w3schools

• In what situation does one or the other property apply?

You should therefore decide when to use one or the other property, or even both.

overflow will say whether it cuts or not and clip how the content is cut.

Also, since there are restrictions (in the case of clip ), you should be aware of this as well. Or you end up using a property that is ignored and you do not know why it does not work.