时间戳

首页 > 解决方案 > 检测浮动上的溢出

css - 检测浮动上的溢出

问题描述

我如何能够检测到这些浮点数的溢出？

无论设置为可见还是隐藏，您都会在哪里看到差异。

overflow: visible;
overflow: hidden;

不是所有的花车都包含溢出吗？

为什么我无法检测到它？

在这段代码中，我无法检测到溢出的位置。

有没有办法让我能够直观地看到它在哪里？

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;
}

标签： csscss-floatoverflow

解决方案

我见过你摆弄，第一件事是当你使用浮点属性时，你需要清除它们，否则它会溢出。要清除浮动，您可以使用以下代码： 

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

并且您需要在浮动容器的父级上添加此 clearfix 类，在您的情况下，container-top 将有另一个类，即 clearfix。

推荐阅读