css - css浮动元素不包含在父div中

Question

我正在尝试将响应式 youtube 视频添加到我的帮助文件中，但该视频不包含在父 div 中并溢出它。我已经尝试了这里建议的一些修复，但似乎没有一个有效。我想知道是否有人可以指出我正确的方向。我正在谈论的一个例子可以在这里看到：http: //designasticker.com.au/help.php您需要使用以下用户名和密码来查看页面：

用户名：贴纸密码：al765bd

Answer 1

EDIT

添加负边距：

margin: -120px;

并调整 iframe 中的视频大小：

<iframe width="YOUR INPUT" height="YOUR INPUT" src="//www.youtube.com/embed/-JWT_tC8_iE" frameborder="0" allowfullscreen></iframe>

将“YOUR INPUT”替换为自定义的宽度和高度。

Answer 2

嗯，这只是一个浮动的问题。当您浮动元素时，您将它们从文档流中取出——这意味着父级不再承认浮动子级的存在。

您可以通过向父级添加 ::after 伪元素来解决此问题，在本例中为 .displayScreen-row：

.displayScreen-row:after { clear: left;
    display: block;
    height: 0;
    visibility: hidden;
    content: ' '; }

这将适用于符合标准的浏览器，但不适用于 IE 6 或 7。对于这两个浏览器（使用条件注释仅针对那些浏览器），您需要像这样解决：

即 6：

.displayScreen-row { height: 100%; }

即 7：

.displayScreen-row { min-height: 100%; }

IE 6 和 7 错误地允许设置高度来确认浮动的孩子。