Почему один блок налезает на другой когда я для картинки «about__right» задаю float:right в CSS???

Question

[Leha Lepeha]

Вот как выглядит когда я поставлю float:right
Вот как должно быть:

Html:

<section class="about section">
				<div class="container container__about">
					<div class="about__left">
						<div class="about__us">
							<ul class="about__list">
								<li class="about__item">
									<div class="about__tittle">
										<h1 class="about__tittle">O NAS</h1>
									</div>
								</li>
								<li class="about__item">
									<div class="about__desc">
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie egestas massa, et sollicitudin urna mattis faucibus. Praesent sagittis laoreet est, et efficitur enim lacinia id. Aenean imperdiet diam nec efficitur commodo. Morbi at purus tempus tellus tempus placerat. Sed faucibus sed elit at lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent posuere orci justo, eu fermentum quam cursus quis. Proin consequat molestie magna accumsan placerat. Nulla quis consectetur tortor. Nam viverra consectetur risus iaculis ultrices. </p>
									</div>
								</li>
								<li class="about__item">
									<div class="about__phone">
										<span>TEL. [phone]</span>
									</div>
								</li>
								<li class="about__item">
									<a href="#" class="about__but">HISTORIA NASZEJ FIRMY</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="about__right">
						<div class="about__right-pic">
							<img src="img/bg/about-pic.png" alt="" class="about__right-pic">
						</div>
					</div>
				</div>
			</section>

.container__about {
	height: 515px;
}

.about__left {
	width: 430px;
	@extend %clearfix;
	margin-left: -20%;
}

.about__desc {
	width: 470px;
	overflow: hidden;
}

.about__right {
	width: 600px;
	height: 380px;
	@extend %clearfix;
}

.about__right-pic {
	width: 600px;
	height: 380px;
	display: inline-block;
	overflow: hidden;
}

Comments

[Moskus]

Картинки - на habrastorage.

Answer 1

[Максим]

Уже давно для обтекания надо забыть float, в этом случае достаточно использовать flexbox, просто для родительского блока пишите, display:flex; в одном блоке идёт картинка и текст в другом текст и картинка ..

Comments

[alvvi]

Для обтекания как раз float забывать не надо. А здесь у автора никакого обеткания нет.

[Leha Lepeha]

Спасибо вам большое, я просто пока еще новичок в этом деле

[Максим]

Илья Ростопка, вам же ни кто не запрещает дать отдельный ответ, я знаю как пользоваться float и flex , в случае автора вопроса float не нужен вообще

[alvvi]

Максим Ленский, я с вами по этому поводу согласен, но еще раз повторюсь: у автора обтекания нет, поэтому и float не нужен. Если бы оно было - нужен был бы float, я лишь поправил ваше неверное утверждение про обтекание.

[Максим]

Илья Ростопка, А зачем он тогда clearfix подключил ?