What's the difference between overflow: auto and overflow: clip?-CodePudding

Simple question, one element has overflow:auto and another element has overflow:clip. What is the difference?

.some-div{
   overflow: auto;
}

.another-div{
   overflow: clip;
}

CodePudding user response：

From the specification

If the computed value of overflow on a block box is neither visible nor clip nor a combination thereof, it establishes an independent formatting context for its contents.

The creation of formatting context is the main difference

Here is a demo

.box {
  border:2px solid;
  margin:10px;
}
.box div {
  float:left;
  width:50px;
  height:50px;
  background:blue;
}

<div  style="overflow:auto">
  <div></div> text
</div>

<div  style="overflow:clip">
  <div></div> text
</div>

Notice how in the second case, the div remain collapsed because there is no creating of a block formatting context to contain the float element