Div не выравнивается float:left

160

15 декабря 2019, 22:50

Всем привет. У меня первый сайт и я столкнулся со следующей проблемой: div "item" должен выравниваться float:left, но если я это указываю, пропадает фон блока wrapbody см картинки.

Код

html, body {width:100%;font-family:Tahoma;font-size:10pt;} 
.main{width:930px;margin:auto;} 
.left-block {float:left;width:150px;height:300px;} 
.content{float:left;width:660px;} 
.banner{margin:0 15px;} 
.right-block{float:left;width:120px;height:300px;} 
.ul_menu{margin:0;padding:0;list-style-type:none;} 
.ul_menu li{background:black;border-top:2px solid white;} 
.ul_menu a{color:white;padding:5px;} 
.wrapbody{margin:10px 15px;background:black;color:white;} 
.bodym15{width:600px;margin:10px 15px;} 
.item{float:left;width:180px;height:220px;padding:25px 0 0 15px;} 
.item a{font-weight:bold;} 
.price a{font-weight:normal;}

<!DOCTYPE html> 
<html> 
<head> 
	<title>Интернет-магазин</title> 
	<link href="style.css" rel="stylesheet"> 
</head> 
<body> 
	<div class="main"> 
	<div class="left-block"> 
		<img src="img/150.png"> 
		<ul class="ul_menu"> 
			<li><a>Категория</a></li> 
			<li><a>Категория</a></li> 
			<li><a>Категория</a></li> 
			<li><a>Категория</a></li> 
		</ul> 
		<ul class="ul_menu"> 
			<li><a>Бренд</a></li> 
			<li><a>Бренд</a></li> 
			<li><a>Бренд</a></li> 
			<li><a>Бренд</a></li> 
		</ul> 
	</div> 
	<div class="content"> 
			<div class="banner"> 
			<img src="img/630x150.png"> 
			</div> 
		<div class="wrapbody"> 
			<div class="bodym15"> 
			<div class="item"> 
				<img src="img/180.png"> 
				<a>Название товара</a> 
				<div class="price"><a>Ценар.</a></div> 
			</div> 
			<div class="item"> 
				<img src="img/180.png"> 
				<a>Название товара</a> 
				<div class="price"><a>Ценар.</a></div> 
			</div> 
			<div class="item"> 
				<img src="img/180.png"> 
				<a>Название товара</a> 
				<div class="price"><a>Ценар.</a></div> 
			</div> 
			</div> 
		</div> 
	</div> 
	<div class="right-block"> 
		<p>Корзина пуста</p> 
	</div> 
	</div> 
</body> 
</html>

Answer 1

Дело в том, что свойство float убирает элемент из привычного потока элементов в документе и в итоге он становится невидимый для других. В результате получается, что в вашем родительском элементе wrapbody отсутствует контент и его высота равна нулю и именно поэтому вы и не видите фон у этого блока. Чтобы wrapbody понимал, что в нем находятся элементы со свойством float, задайте следующие правила в CSS:

.wrapbody::after {
  content: "";
  display: table;
  clear:both;
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как получать кадры из компонента <video></video>?

Скажите, пожалуйста, как мне получать кадры с видео, используя тег <video></video>, чтобы их можно было обработать и вывести на канвас?

148

HTML

Запрет на выход за границы экрана:

У меня такой код:

153

HTML

Как сделать слайды разного размера на slick?

Кто нибудь сталкивался с подобной задачей, помогите решить задачу

156

jQuery

Получить переменную из URL

На страницу можно попасть кликнув на одну из ссылок, в которых прописаны якоряТо есть при попадании на страницу её URL может иметь вот такой...

175