Detecting overflow on floats

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 this code I’m not able to detect where the 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("") no-repeat 0 0;
  background-size: cover;   
}

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

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

1 answer

  • answered 2019-08-13 10:50 Harshada Samant

    I have seen you fiddle and the first thing is when you use float property you need to clear them otherwise it will overflow. To clear float you can use following code:.

    .clearfix::after {
       display: block;
       content: "";
        clear: both;
    }
    

    And you need to add this clearfix class on parent of float containers, in your case container-top will have another class i.e clearfix.