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

Question

[Porebro]

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

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

Код на jsfiddle

Comments

[Mikhail Osher]

В следующий раз приводите пример на jsfiddle/plunker.

[Евгений Петров]

Чё так кода мало? Давай исчо.

[Алексей Зуев]

еще normalize.css не скинули)

[Porebro]

Mikhail Osher: Хорошо , просто я здесь пока новенький , не со всем разобрался.

Answer 1

[Евгений Петров]

У вас недвусмысленно стоит:

.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;
}

Comments

[Porebro]

хмм , вписал в код , но бордер так и не убрался . пришлось присваивать у второе имя у класса (.product2) и ему уже задал border-bottom: transparent;

Answer 2

[Андрей Б.]

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 не работает и соответственно он тут лишний.

Comments

[Porebro]

По поводу первого момента. Нашел в коде , что я задал класс price в двух местах , то есть это была моя ошибка . Поменял price на price3 тот что в диве right-part. В следствии чего схлопывание прекратилось. Но появилась небольшая проблемка. Когда задаю у тега border-right 1px solid; и border-left :1px solid; , то он занимает лишнее место в 2а пикселя. А я вроде слышал , что есть способ при котором бордер будет и видимым, и будет кушать только свое внутреннее пространство(т. е. внутри тега) .

[Андрей Б.]

box-sizing: border-box; - включает в ширину элемента border и padding

[Porebro]

*{
    box-sizing: border-box;
}

Да, он у меня подключен , но когда я начинаю играть с border, то невооруженным глазом видно , как он двигает соседние теги

Answer 3

[Aigelov]

Можете почитать материал на хабре habrahabr.ru/post/189118