浮动div不浮动

Question

更新: 1)我放置了真正的文本，其中包含2)我放置了显示:表格到第一个.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>

​

Answer 1

只要将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>

​

Answer 2

使用display:flex来实现.greenz。

.greenz {background-color:#CFC; display:flex; border: 1px dotted green}

小提琴演示

或者您可以使用display:table; 进行IE。

小提琴演示

Answer 3

您可以使用width:60%;

.greenz {背景颜色：#CFC；边框:1 1px虚线绿色；宽度:60%}