Is there any difference between clip and overflow property?

Question

Studying on the property clip I came across the following statement:

The estate clip works in a similar way to overflow with some differences.

It gave me some doubts:

• This statement is true?
• What would those differences be?
• In what situation applies one property or another?

Answer 1

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

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

Already the property overflow:; specifies what happens if the content overflows the "box/container" of a single element.

This property when specified serves to add scrollbars when the content of an element is too large to fit in a specified area or to cut/limit the content of a box when used 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 by making use of the 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>

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

But as we can see in this example, while the clip literally clip or a portion of the image, already in the overflow:hidden; we would have to work better the code to get this same effect of clip, but in the end the concept is the same as using the overflow:hidden; this way. The image just seems more fit because we gave a width:100%; image to respect the box/container Parent clipOverflow.

Answer 2

• This statement is true?

It’s not. These properties even have a relationship with each other, but they control different things.

• What would those differences be?

clip: allows specifying a rectangular area in which an image wider than the container must be cut.

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

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

w3schools

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

w3schools

• In what situation applies one property or another?

You must therefore decide when to use one or the other property, or even the two.

overflow will tell whether or not to cut and cliphow the content is cut.

In addition, as there are restrictions (in the case of clip), you should be aware of this too. Or you end up using a property that is ignored and you don’t know why it doesn’t work.