Не применяется float к двум элементам

.banner-right { 
  float: right; 
  width: 300px; 
  height: 100vh; 
} 
.content { 
  padding-right: 300px; 
}

<div class="banner-right" style="background-image: url(https://wallpapershome.ru/images/pages/pic_hs/4694.jpg);"></div> 
<div class="content">Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Рекламных деревни, ручеек предупреждал все эта переулка вдали? Грустный, ipsum мир меня страна послушавшись вершину свой решила вопроса, о сих пор пунктуация, ее это повстречался от всех использовало семантика лучше. Безорфографичный страна, бросил гор составитель семь повстречался путь дорогу ее букв пунктуация все по всей домах власти вершину необходимыми это вскоре не ему, он, которое от всех! Продолжил, себя предупредила. Алфавит заманивший агентство не страну решила журчит рот наш жаренные своего, предупредила вскоре силуэт парадигматическая безорфографичный дороге рукопись предложения! Там повстречался, свою, парадигматическая одна гор прямо рыбного семантика инициал, рекламных приставка переписывается заголовок.</div>

html, 
body { 
  min-height: 100%; 
} 
 
body { 
  background: linear-gradient(#ccc, #fbfbfb); 
  background-size: 100% 100%; 
  background-repeat: no-repeat; 
} 
 
p, 
img { 
  float: left; 
} 
 
p { 
  width: calc(100% - 220px); 
  font-size: 16px; 
  padding: 0 10px; 
} 
 
.wrapper { 
  width: 480px; 
  margin: 30px auto; 
  padding: 20px 0; 
} 
 
.clear, 
.clear:before, 
.clear:after { 
  content: ""; 
  display: block; 
  clear: both; 
}

<div class="wrapper clear"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero voluptatem laudantium, tempore ipsum, repellendus pariatur, minus qui maxime veritatis necessitatibus inventore expedita. Delectus totam ex temporibus illo repellendus error accusantium 
    iure qui tempore aut architecto laboriosam labore earum quo fugiat, cum perferendis, autem enim, dolore praesentium officiis amet adipisci molestias!</p> 
  <img src="http://placehold.it/200x300/ccc" alt=""> 
</div> 
 
<div class="wrapper clear"> 
  <img src="http://placehold.it/200x300/ccc" alt=""> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero voluptatem laudantium, tempore ipsum, repellendus pariatur, minus qui maxime veritatis necessitatibus inventore expedita. Delectus totam ex temporibus illo repellendus error accusantium 
    iure qui tempore aut architecto laboriosam labore earum quo fugiat, cum perferendis, autem enim, dolore praesentium officiis amet adipisci molestias!</p> 
 
</div> 
 
<div class="wrapper clear"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero voluptatem laudantium, tempore ipsum, repellendus pariatur, minus qui maxime veritatis necessitatibus inventore expedita. Delectus totam ex temporibus illo repellendus error accusantium 
    iure qui tempore aut architecto laboriosam labore earum quo fugiat, cum perferendis, autem enim, dolore praesentium officiis amet adipisci molestias!</p> 
  <img src="http://placehold.it/200x300/ccc" alt=""> 
</div>

.block { 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
display: flex; 
} 
 
.banner-right { 
  width: 50%; 
  height: 100vh; 
  background-size: 100% 100%; 
} 
 
.content { 
  width: 50%; 
 }

<div class="block"> 
	<div class="content"> 
		Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Рекламных деревни, ручеек предупреждал все эта переулка вдали? Грустный, ipsum мир меня страна послушавшись вершину свой решила вопроса, о сих пор пунктуация, ее это повстречался от всех использовало семантика лучше. Безорфографичный страна, бросил гор составитель семь повстречался путь дорогу ее букв пунктуация все по всей домах власти вершину необходимыми это вскоре не ему, он, которое от всех! Продолжил, себя предупредила. Алфавит заманивший агентство не страну решила журчит рот наш жаренные своего, предупредила вскоре силуэт парадигматическая безорфографичный дороге рукопись предложения! Там повстречался, свою, парадигматическая одна гор прямо рыбного семантика инициал, рекламных приставка переписывается заголовок. 
	</div> 
 
	<div class="banner-right" style="background-image: url(https://wallpapershome.ru/images/pages/pic_hs/4694.jpg);"></div> 
</div>