Схлопывание родителя, если у дочерних элементов указан float?

1) Первая проблема!
Дело обстоит вот в чем. на 67 строке в html коде у меня открывается тег див с идентификатором sales, внутри которого есть другие дивы с содержимым. Для него заданы соответствующие стили , и проблема заключается в том, что когда я смотрю на страницу через отладчик( в хроме) , то тег sales занимает 30px по высоте, так как у него заданы паддинги, без них и вовсе был бы 0. Если я копирую кусок этого кода с css св-ми и просматриваю в браузере , то все становится на свои места, по высоте он начинает занимать 98px. Никак не могу , что с ним происходит?

2) Вторая проблема!
На 207 строчке css кода задаю для элемента .product , псевдокласс last-child. Но эффекта ноль, объясните пожалуйста, в чем моя ошибка?

Код на jsfiddle
  • Вопрос задан
  • 3925 просмотров
Решения вопроса 2
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
У вас недвусмысленно стоит:
.price {
	float: left;
}

Допишите
.product:after,
#sales:after {
	content: "";
	display: block;
	clear: both;
}

Вам следует понять, что такое last-child (хотя, вроде, и по названию можно догадаться), и чем это отличается от last-of-type.
.product:last-of-type { 
	border-bottom-color: transparent;
}
Ответ написан
andykov
@andykov
Shit happens
1. Там применяется float к классу .price. Вот родитель у вас и схлопнулся.
Решение: укажите родителю clearfix или overflow: hidden;

2. Читаем про last-child внимательней.
Псевдокласс :last-child задает стилевое оформление последнего элемента своего родителя.

А у вас идет последним элемент с id deep_right. Чтобы применился .product он должен быть последним элементом в своем родителе.

P.S. В .box1 у вас прописан display: inline-block; в то время как в .price указан float: left;
float делает элемент блочным, поэтому inline-block не работает и соответственно он тут лишний.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы