每当我尝试在创建的div元素中渲染youtube嵌入时，视频都会超出我创建的div的范围。
注意：这是家庭作业。我不是在寻找要复制的代码，只是在正确的方向上提示或推动。
- 规则不能放在HTML代码中，它们必须位于样式表中
-样式表中已设置的规则在赋值中概述(包括浮点数(。
本地渲染
.CSS：
.container {
width: 100%;
background-color: #60c90e;
}
.content {
width: 100%;
}
.video {
width: 95%;
margin: 2.5%;
border-radius: 20px;
padding: 1%;
background-color: white;
}
.footer {
background-color: aqua;
height: 50px;
}
.video iframe {
width: 65%;
margin: 10px;
float: left;
}
.HTML：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="CSS/test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="content">
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/vC130RwBJQ8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<h3>test</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst quisque sagittis purus sit amet. Ut porttitor leo a diam sollicitudin tempor. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Orci eu lobortis elementum nibh tellus. Nam at lectus urna duis convallis convallis tellus id. Tellus id interdum velit laoreet id donec. Nunc faucibus a pellentesque sit amet porttitor </p>
</div> <!-- end of video -->
</div> <!-- end of content -->
<footer class="footer">test</footer>
</div> <!-- end of container -->
</body>
</html>
您需要清除.videodiv内的浮动iframe。无需编辑 HTML，您可以使用::after伪元素执行此操作。我在上面的示例中添加了以下代码：
.video::after {
content: '';
display: block;
clear: both;
}
工作片段：
.container {
width: 100%;
background-color: #60c90e;
}
.content {
width: 100%;
}
.video {
width: 95%;
margin: 2.5%;
border-radius: 20px;
padding: 1%;
background-color: white;
}
.footer {
background-color: aqua;
height: 50px;
}
.video iframe {
width: 65%;
margin: 10px;
float: left;
}
.video::after {
content: '';
display: block;
clear: both;
}<div class="container">
<div class="content">
<div class="video">
<iframe width="560" height="560" src="https://www.youtube.com/embed/vC130RwBJQ8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<h3>test</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst quisque sagittis purus sit amet. Ut porttitor leo a diam sollicitudin tempor. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Orci eu lobortis elementum nibh tellus. Nam at lectus urna duis convallis convallis tellus id. Tellus id interdum velit laoreet id donec. Nunc faucibus a pellentesque sit amet porttitor </p>
</div> <!-- end of video -->
</div> <!-- end of content -->
<footer class="footer">test</footer>
</div>