Я разрабатываю сайт для своего клиента и не имею большого опыта в веб-дизайне и CSS. Я также хочу создать его в стандартном стиле CSS.
Вопрос в том, что я довольно запутался с свойством CSS align и float. Я знаю, что существует много различий между этими двумя свойствами, но я все еще не в состоянии справиться с этим правильно во время разработки.
Может ли кто-нибудь объяснить мне точную разницу между этими двумя свойствами?
Во-первых, я хотел бы предложить, чтобы вы ссылались на серию статей Head First CSS и HTML публикациями O'Reilly. Это обязательная книга для тех, кто занимается разработкой.
Таким образом, свойство float используется для перемещения большого количества блоков (например, вашей боковой панели, области содержимого и т.д.) И выравнивания HTML, о котором вы говорите, вы можете сделать то же самое в CSS таким образом.
.test{
text-align: right;
}
Приведенный выше код будет CSS и эквивалентным HTML-кодом будет.
<div class="test"> This text will be aligned from right </div>
На данный момент ссылка на O'Reilly head сначала с HTML и CSS поможет вам многое.
"text-align" применяется к содержимому окна, а "float" относится к самому ящику.
Выровнять по горизонтали - вы используете выравнивание для выравнивания текста и других элементов, а слева, справа, по центру или по правилу. Выравнивание НЕ удаляет элемент из потока документа.
Float - плавает объект слева или справа и удаляет его из потока документов. (т.е. миниатюрное изображение с текстом абзаца, текущим вокруг него - вам обычно нужно установить некоторые поля на изображении, чтобы он выглядел правильно).
Скорее всего, вы будете использовать float, чтобы выложить страницу. Я бы предложил использовать сетку. Вот самая простая, наиболее совместимая системная система, о которой я знаю на сегодняшний день. http://webdesignerwall.com/trends/960-grid-system-is-getting-old
Также вам нужно будет понять, что использует классы "первым" и что делает clearfix CSS. Вам также нужно будет понять создание базовой сетки (вертикальная сетка, а не только горизонтальная), чтобы все элементы не только выравнивались слева направо, но вверх и вниз.
Если вы даете float дочернему div, то родительский div становится независимым от размеров дочернего div, т.е. Родительский div не будет автоматически увеличивать его ширину и высоту. (Если вы не дали никаких измерений родительскому div, то он наследует width:0 and height:0)
Многие дизайнеры сталкиваются с проблемами из-за float потому что это не дружелюбно с макетом, но это очень полезно. Мы можем сделать float дружественным с макетом с помощью селектора css :after.
тогда как если мы дадим Text-align дочернему div, родительский div не будет затронут.
Это все, что я знаю.
align - свойство выравнивать один элемент для таблицы, текста, диапазона и т.д.
float - свойство выравнивать элементы уровня блока, такие как sidebar, div и т.д.