Как прижать элемент к низу или верху родительского элемента

Способ №1. Абсолютное позиционирование

Используем абсолютное позиционирование и при этом не забываем, что родительский элемент обязательно должен иметь позицию relative:

#parent{
	position:relative; /* добавили */
	background:black;
	height:300px;
}
#child{
	position:absolute; /* добавили */
	bottom:0; /* добавили */
	background:red;
	height:100px;
	width:100px;
}

<div id="parent">
<div id="child">Текст дочернего элемента</div>
</div>

Плюсы: Простота

Минусы: При абсолютном позиционировании другие элементы на странице ведут себя так, будто элемента с абс. позиционированием не существует.

Способ №2. Вертикальное выравнивание

Этот способ подойдёт в том случае, если, к примеру, у родителя не задана высота, в то время как все дочерние элементы имеют разные высоты:

#parent{
	background:black;
}
#child,#child2,#child3{
	vertical-align:bottom;
	display:inline-block;
}
#child{
	background:red;
	height:300px;
	width:100px;
}
#child2{
	background:yellow;
	height:100px;
	width:100px;
}
#child3{
	background:green;
	height:200px;
	width:100px;
}

<div id="parent">
<div id="child">Текст дочернего элемента 1</div>
<div id="child2">Текст дочернего элемента 2</div>
<div id="child3">Текст дочернего элемента 3</div>
</div>

1) Для того, чтобы применить вертикальное выравнивание (vertical-align), элементы ни в коем случае не должны иметь свойство float.
2) В отличие от предыдущего способа, нам без разницы, какую позицию (relative, absolute и тд.) будет иметь родитель, поэтому её можно просто не писать, по умолчанию она static.

Как прижать элементы к верху родительского

Чтобы прижать все элементы к верху родительского, нам необходимо задать свойство vertical-align в значение top:

#parent{
	background:black;
}
#child,#child2,#child3{
	vertical-align:top; 
	width:100px;
	display:inline-block;
}
#child{
	background:red;
}
#child2{
	background:yellow;
}
#child3{
	background:green;
}

<div id="parent">
<div id="child">Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1</div>
<div id="child2">Мало текста, мало текста. Текст дочернего элемента 2</div>
<div id="child3">Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3</div>
</div>