浮动div不浮动
Floating div doesn't float
更新：
1) 我放置了真实的文本，其中包含 <br>。
2) 我将 display:table 放在第一个 .geenz 上，它变得更好了，但 3d 段落缩小了，但我看不出有任何原因，希望它会占据页面的 100% 宽度，但不知道如何.
我知道这道题很简单，而且是html的基础，但我真的不会自己解决。我希望 .fr div 浮动在 .greenz div 上，但它们只是一个在另一个之上。清除对我没有帮助，最好的方法是什么，除了将固定宽度设置为 .greenz 来避免它？
.main_cont {width:100%;}
.wrapper {width:800px; margin: 0 auto; border:1px solid gold; padding:5px;}
.fr {float:right;}
.greenz {background-color:#CFC; border: 1px dotted green;}
<div class="main_cont">
<div class="wrapper">
<div class="fr"><iframe width="250" height="188" src="https://www.youtube.com/embed/0vsYAL1j6iE" frameborder="0" allowfullscreen></iframe></div>
<p>Был месяц май, были нежные сны уходящей весны,<br>
Резвился дождь в ожидании летнего зноя,<br>
Вечерний рай неустанно справлял день рожденья весны,<br>
Был месяц май, мы любили друг друга с тобой,<br>
Были я и ты, были я и ты,<br>
Было лето цвета морской волны.</p>
<div class="greenz" style="display:table;">А теперь все навсегда ушло, далеко ушло,<br>
Вот уже без нас вечерний час встречает улица,<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.</div>
<p>Был месяц май, нас с тобою встречал у подъезда рассвет,<br>
Я был другим, улыбался во сне, как ребенок,<br>
Не исчезай, возвращаясь домой, говорила ты мне,<br>
Был месяц май, только время бежало вперед,<br>
Были я и ты, были я ты, было лето цвета морской волны.</p>
<div class="greenz">А теперь все навсегда ушло, далеко ушло,<br>
Вот уже без нас вечерний час встречает улица,<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.</div>
<p>Был месяц май, были нежные сны уходящей весны,<br>
Резвился дождь в ожидании летнего зноя,<br>
Вечерний рай неустанно справлял день рожденье листвы,<br>
Был месяц май, мы любили друг друга с тобой,<br>
Были я и ты, были я ты,<br>
Было лето цвета морской волны.</p>
<div class="greenz">
А теперь все навсегда ушло, далеко ушло,<br>
Вот уже без нас вечерний час встречает улица,<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.
</div>
</div>
使用 display:flex 到 .greenz。
.greenz {background-color:#CFC; display:flex; border: 1px dotted green}
或者您可以使用 display:table; 将在 IE 上工作
只需将 float:left 添加到 .greenz 就可以了
.main_cont {width:100%;}
.wrapper {width:800px; margin: 0 auto; border:1px solid gold; padding:5px;}
.fr {float:right;}
.greenz {background-color:#CFC; border: 1px dotted green;float:left}
<div class="main_cont">
<div class="wrapper">
<div class="fr"><iframe width="250" height="188" src="https://www.youtube.com/embed/0vsYAL1j6iE" frameborder="0" allowfullscreen></iframe></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus felis eget ante mollis molestie. Donec risus odio, porta ut aliquam id, lobortis ac leo. Cras eget pharetra lorem. Cras lacinia dui vel mi tincidunt facilisis. Aliquam efficitur massa at est ultricies, a blandit lacus vulputate. </p>
<p class="greenz">Morbi eu dolor id diam interdum tincidunt. In purus nulla, sollicitudin sit amet justo ut, auctor imperdiet magna. Mauris iaculis, ante ut congue pretium, erat ex aliquet erat, eget luctus erat diam eget diam. Aenean ultrices nec libero quis posuere. Vivamus porta massa et tellus tincidunt, a blandit purus imperdiet. Aenean imperdiet porta aliquam. Aenean mollis sem id arcu vehicula, nec commodo leo malesuada. Proin eget vulputate tellus. Praesent fermentum dapibus iaculis. Morbi ut augue at purus euismod finibus sed sed eros.</p>
<p>Sed tincidunt purus in ante vehicula gravida. Suspendisse semper augue nisl, id cursus urna posuere consequat. Ut sagittis ante lacinia odio porttitor consectetur. Pellentesque mollis a felis quis ullamcorper. Vivamus pellentesque ante sed mauris aliquet volutpat. Sed vitae convallis lacus. Curabitur eu convallis mauris. Morbi porttitor molestie nisi, convallis laoreet justo rhoncus in.</p>
<p>Nunc luctus risus id odio tristique, at varius tortor molestie. Mauris nec nisl eget leo lobortis gravida. Vivamus enim augue, porttitor et imperdiet sit amet, lobortis et ante. Sed vulputate volutpat turpis, eu pretium ex egestas quis. Aenean sagittis viverra lectus non sodales. Nam ipsum urna, tristique id nisi quis, vulputate fermentum felis. Curabitur vehicula sapien quis arcu placerat vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse luctus magna a risus semper ornare. In hac habitasse platea dictumst.</p>
<p>Duis euismod, erat commodo auctor fringilla, nisl magna tempor lacus, quis venenatis dui massa id diam. Sed lorem odio, fringilla ut efficitur ut, malesuada vel ante. Proin scelerisque dui eu elit commodo accumsan. Aliquam ut tellus nec odio mollis vestibulum. Nam at ex nec arcu dictum iaculis in a lectus. Phasellus ullamcorper blandit sodales. Proin consequat, mi vel iaculis sagittis, lacus eros fringilla magna, in consectetur urna nisi eget elit. Praesent fringilla, neque a feugiat maximus, diam massa imperdiet ligula, quis molestie magna elit in ligula. Duis gravida ultrices consequat. Suspendisse porttitor, ante vitae sollicitudin rutrum, nisl ipsum vulputate dui, sit amet porta ligula ligula vitae nisl. </p>
</div>
</div>
你可以使用 width:60%;
.greenz {background-color:#CFC; border: 1px dotted green; width:60%}
更新：
1) 我放置了真实的文本，其中包含 <br>。
2) 我将 display:table 放在第一个 .geenz 上，它变得更好了，但 3d 段落缩小了，但我看不出有任何原因，希望它会占据页面的 100% 宽度，但不知道如何.
我知道这道题很简单，而且是html的基础，但我真的不会自己解决。我希望 .fr div 浮动在 .greenz div 上，但它们只是一个在另一个之上。清除对我没有帮助，最好的方法是什么，除了将固定宽度设置为 .greenz 来避免它？
.main_cont {width:100%;}
.wrapper {width:800px; margin: 0 auto; border:1px solid gold; padding:5px;}
.fr {float:right;}
.greenz {background-color:#CFC; border: 1px dotted green;}
<div class="main_cont">
<div class="wrapper">
<div class="fr"><iframe width="250" height="188" src="https://www.youtube.com/embed/0vsYAL1j6iE" frameborder="0" allowfullscreen></iframe></div>
<p>Был месяц май, были нежные сны уходящей весны,<br>
Резвился дождь в ожидании летнего зноя,<br>
Вечерний рай неустанно справлял день рожденья весны,<br>
Был месяц май, мы любили друг друга с тобой,<br>
Были я и ты, были я и ты,<br>
Было лето цвета морской волны.</p>
<div class="greenz" style="display:table;">А теперь все навсегда ушло, далеко ушло,<br>
Вот уже без нас вечерний час встречает улица,<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.</div>
<p>Был месяц май, нас с тобою встречал у подъезда рассвет,<br>
Я был другим, улыбался во сне, как ребенок,<br>
Не исчезай, возвращаясь домой, говорила ты мне,<br>
Был месяц май, только время бежало вперед,<br>
Были я и ты, были я ты, было лето цвета морской волны.</p>
<div class="greenz">А теперь все навсегда ушло, далеко ушло,<br>
Вот уже без нас вечерний час встречает улица,<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.</div>
<p>Был месяц май, были нежные сны уходящей весны,<br>
Резвился дождь в ожидании летнего зноя,<br>
Вечерний рай неустанно справлял день рожденье листвы,<br>
Был месяц май, мы любили друг друга с тобой,<br>
Были я и ты, были я ты,<br>
Было лето цвета морской волны.</p>
<div class="greenz">
А теперь все навсегда ушло, далеко ушло,<br>
Вот уже без нас вечерний час встречает улица,<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.
</div>
</div>
使用 display:flex 到 .greenz。
.greenz {background-color:#CFC; display:flex; border: 1px dotted green}
或者您可以使用 display:table; 将在 IE 上工作
只需将 float:left 添加到 .greenz 就可以了
.main_cont {width:100%;}
.wrapper {width:800px; margin: 0 auto; border:1px solid gold; padding:5px;}
.fr {float:right;}
.greenz {background-color:#CFC; border: 1px dotted green;float:left}
<div class="main_cont">
<div class="wrapper">
<div class="fr"><iframe width="250" height="188" src="https://www.youtube.com/embed/0vsYAL1j6iE" frameborder="0" allowfullscreen></iframe></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus felis eget ante mollis molestie. Donec risus odio, porta ut aliquam id, lobortis ac leo. Cras eget pharetra lorem. Cras lacinia dui vel mi tincidunt facilisis. Aliquam efficitur massa at est ultricies, a blandit lacus vulputate. </p>
<p class="greenz">Morbi eu dolor id diam interdum tincidunt. In purus nulla, sollicitudin sit amet justo ut, auctor imperdiet magna. Mauris iaculis, ante ut congue pretium, erat ex aliquet erat, eget luctus erat diam eget diam. Aenean ultrices nec libero quis posuere. Vivamus porta massa et tellus tincidunt, a blandit purus imperdiet. Aenean imperdiet porta aliquam. Aenean mollis sem id arcu vehicula, nec commodo leo malesuada. Proin eget vulputate tellus. Praesent fermentum dapibus iaculis. Morbi ut augue at purus euismod finibus sed sed eros.</p>
<p>Sed tincidunt purus in ante vehicula gravida. Suspendisse semper augue nisl, id cursus urna posuere consequat. Ut sagittis ante lacinia odio porttitor consectetur. Pellentesque mollis a felis quis ullamcorper. Vivamus pellentesque ante sed mauris aliquet volutpat. Sed vitae convallis lacus. Curabitur eu convallis mauris. Morbi porttitor molestie nisi, convallis laoreet justo rhoncus in.</p>
<p>Nunc luctus risus id odio tristique, at varius tortor molestie. Mauris nec nisl eget leo lobortis gravida. Vivamus enim augue, porttitor et imperdiet sit amet, lobortis et ante. Sed vulputate volutpat turpis, eu pretium ex egestas quis. Aenean sagittis viverra lectus non sodales. Nam ipsum urna, tristique id nisi quis, vulputate fermentum felis. Curabitur vehicula sapien quis arcu placerat vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse luctus magna a risus semper ornare. In hac habitasse platea dictumst.</p>
<p>Duis euismod, erat commodo auctor fringilla, nisl magna tempor lacus, quis venenatis dui massa id diam. Sed lorem odio, fringilla ut efficitur ut, malesuada vel ante. Proin scelerisque dui eu elit commodo accumsan. Aliquam ut tellus nec odio mollis vestibulum. Nam at ex nec arcu dictum iaculis in a lectus. Phasellus ullamcorper blandit sodales. Proin consequat, mi vel iaculis sagittis, lacus eros fringilla magna, in consectetur urna nisi eget elit. Praesent fringilla, neque a feugiat maximus, diam massa imperdiet ligula, quis molestie magna elit in ligula. Duis gravida ultrices consequat. Suspendisse porttitor, ante vitae sollicitudin rutrum, nisl ipsum vulputate dui, sit amet porta ligula ligula vitae nisl. </p>
</div>
</div>
你可以使用 width:60%;
.greenz {background-color:#CFC; border: 1px dotted green; width:60%}