Detecting overflow on floats

#1

How would I be able to detect overflow on these floats?

Where you would see a difference whether it is set to visible or hidden.

overflow: visible;
overflow: hidden;

Don’t all floats contain overflow?

Why am I not able to detect it?

On all my other floats I was able to detect the overflow by removing overflow:hidden;
On this code I’m not able to detect where overflow is.

Is there a way where I would be able to visually see where it is?
https://jsfiddle.net/8ad6yhek/

.container {
  width: 936px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

.container-top {
  position: relative;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;   
}

.container-left-video {
  margin: 0;
  float: left;
}

.container-right-video {
  float: right;
}
#2

When you add overflow: visible; to a code that uses floats aren’t you supposed to see a visual change in the code?

It could be set to visible or hidden and there’s no visual change in the code, how come?
https://jsfiddle.net/9hota4dv/2/

.container {
  width: 936px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
  overflow: visible;
}

.container-top {
  overflow: visible;
  position: relative;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;
}
#3

You seem to misunderstand what overflow (other than visible) achieves when used on a container that contains floats.

If a container is auto height and only contains floated children then the container height will be zero and any background on the container would not be visible. If you add the overflow ‘fix/hack’ then the container will encompass the float and the background could be seen and the float contained.

If the container has a fixed height of say 310px and the floated children are less than 310px tall (even when stacked vertically) then adding the overflow will have no visual effect because your container is already tall enough to encompass the floats.

So the answer to your question is that you would need to remove fixed or min heights from the container of the floated children before you would see any effect from adding/removing overflow with regard to float behaviour.

2 Likes