Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Кто-нибудь может объяснить по-человечески смысл свойтв float и clear? / 19 сообщений из 19, страница 1 из 1
03.10.2016, 01:52
    #39319335
svnvlad
svnvlad
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
Я уже 10 лет знаком с веб-дизайном, но так за эти годы и не смог понять, что же это за бред?
Открываю какую-нибудь статью, читаю, и еще больше запутываюсь.
То ли нарочно пишут такими словосочетаниями, что ничего не понятно, то ли сами не понимают что пишут.
Например, как понять вот это??
Свойство clear может принимать четыре значения. Both, наиболее используемое, применяется для отмены float каждого из направлений. Left и Right - используются для отмены float одного из направлений. None - по умолчанию, обычно не используется, за исключением случаев, когда необходимо отменить значение clear. Значение inherit было бы пятым значением, но оно странным образом не поддерживается в Internet Explorer. Отмена только левого или правого float, встречается гораздо реже, но, безусловно, имеет свои цели.
Большой коллапс
Ещё одна удивительная вещь при работе со свойством float - это то, что его использование может влиять на родительский элемент. Если такой элемент содержит только float-элементы, то он буквально схлопывается, то есть его высота равна нулю. Это не всегда заметно, если у родительского элемента не установлен какой-либо видимый фон.
Где закономерность? Как вообще это применять, если оно непредсказуемым образом "может повлиять на родительский элемент"??
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2016, 01:59
    #39319337
svnvlad
svnvlad
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
Зачем было вообще устанавливать свойство float, чтобы потом очищать его свойством clear?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2016, 02:06
    #39319338
svnvlad
svnvlad
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
Нужно переместить слои блока цены и кнопку в самый низ. Уже всякие варианты перебрал с этими float и clear, все равно блоки торчат справа, а не снизу.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2016, 05:26
    #39319345
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
svnvlad,

я использую clear:both только для тех блоков, которые гарантированно должны находиться ниже любого предыдущего.

Может стоит Flexbox заюзать? Или Grid Layout ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2016, 05:31
    #39319346
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
P.S. Блоки со стилем clear:both и жёсткой высотой (даже нулевой) хорошо работают,
например когда нужно "раздвинуть" родительский блок по реальному содержимому (как раз для случаев с дочерними блоками float),
или получить гарантированный вертикальный отступ (по стандарту у вложенных элементов вертикальные margin не работают)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2016, 09:15
    #39319387
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
svnvladГде закономерность?
Все там есть...
Не пугай людей.
svnvladКак вообще это применять, если оно непредсказуемым образом "может повлиять на родительский элемент"??
Как написано у уставе караульной службы "Часовой должен умело действовать штыком и прикладом"...
Т.ч. тут главное умело действовать . ;)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2016, 09:17
    #39319389
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
svnvladНужно переместить слои блока цены и кнопку в самый низ. Уже всякие варианты перебрал с этими float и clear, все равно блоки торчат справа, а не снизу.
Вместо картинки нужно было сделать простой тестовый пример...

И не стоит свою неумелость "оборачивать" в праведное негодование на других разработчиков.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.10.2016, 17:28
    #39321253
svnvlad
svnvlad
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
krvsasvnvladНужно переместить слои блока цены и кнопку в самый низ. Уже всякие варианты перебрал с этими float и clear, все равно блоки торчат справа, а не снизу.
Вместо картинки нужно было сделать простой тестовый пример...

И не стоит свою неумелость "оборачивать" в праведное негодование на других разработчиков.
А откуда она возьмется, умелость, если нет ни одного вразумительного объяснения с примерами, чтобы по шагам усвоить этот урок?
Там буквально к каждому слову надо привязываться, чтобы понять.
Вот начнем с самого начала, что означает это: "Both, наиболее используемое, применяется для отмены float каждого из направлений"? Простой вопрос - зачем задавать float, а потом отменять его, если его можно было просто не задавать?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.10.2016, 17:55
    #39321272
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
авторВот начнем с самого начала, что означает это: "Both, наиболее используемое, применяется для отмены float каждого из направлений"? Простой вопрос - зачем задавать float, а потом отменять его, если его можно было просто не задавать?
а если надо задать ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.10.2016, 17:56
    #39321273
oaken
oaken
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
svnvlad Простой вопрос - зачем задавать float, а потом отменять его, если его можно было просто не задавать?

float указывает элементу куда он должен прижаться, текст при этом, будет обтекать его с другой стороны. clear отменяет (или возвращает) эффект обтекания для текста. Те это разные сущности и действуют они на разные элементы с разным эффектом.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.10.2016, 18:26
    #39321294
svnvlad
svnvlad
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
oaken,
не вижу логики - задавать и при этом очищать = не задавать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.10.2016, 18:27
    #39321297
svnvlad
svnvlad
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
вадяавторВот начнем с самого начала, что означает это: "Both, наиболее используемое, применяется для отмены float каждого из направлений"? Простой вопрос - зачем задавать float, а потом отменять его, если его можно было просто не задавать?
а если надо задать ?
Так мы же его очищаем с помощью clear, толку то от задавания?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.10.2016, 18:37
    #39321309
oaken
oaken
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
svnvladoaken,
не вижу логики - задавать и при этом очищать = не задавать.а я ее вижу, у меня очищать != не задавать, давай дальше разбирать конкретный примеры
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.10.2016, 18:46
    #39321318
svnvlad
svnvlad
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
oakensvnvladoaken,
не вижу логики - задавать и при этом очищать = не задавать.а я ее вижу, у меня очищать != не задавать, давай дальше разбирать конкретный примеры
ставим у блока float: left - задаем расположение слева, обтекание текстом справа.
тут же ставим у этого же блока clear: both. Как читаем в инструкции - очищаем все эффекты float, значит это то же самое, что бы и не задавали ни float, ни clear, разве нет? Так написано в инструкции.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.10.2016, 18:49
    #39321320
oaken
oaken
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
svnvladoakenпропущено...
а я ее вижу, у меня очищать != не задавать, давай дальше разбирать конкретный примеры
ставим у блока float: left - задаем расположение слева, обтекание текстом справа.
тут же ставим у этого же блока clear: both. Как читаем в инструкции - очищаем все эффекты float, значит это то же самое, что бы и не задавали ни float, ни clear, разве нет? Так написано в инструкции.Ну ты пробовал такое делать на примере? - и что блок перестает прижиматься к левому краю?
Вот здесь все более-менее доходчиво объясняется.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.10.2016, 19:11
    #39321333
svnvlad
svnvlad
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
oakensvnvladпропущено...

ставим у блока float: left - задаем расположение слева, обтекание текстом справа.
тут же ставим у этого же блока clear: both. Как читаем в инструкции - очищаем все эффекты float, значит это то же самое, что бы и не задавали ни float, ни clear, разве нет? Так написано в инструкции.Ну ты пробовал такое делать на примере? - и что блок перестает прижиматься к левому краю?
Вот здесь все более-менее доходчиво объясняется.
Я читал то же самое, только по-русски http://www.css-tricks.ru/articles/Details/AllAboutFloats
Опять загвоздка в тексте:
авторДля float, родственное свойство - clear. Любой элемент, у которого установлено свойство clear, не будет поднят вверх, как от него ожидается, а отобразится ниже, после float-элементов.

Что значит "не будет поднят вверх, как от него ожидается"?? Где написано, что float поднимает элемент вверх?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.10.2016, 01:32
    #39321488
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
svnvlad,

Давно-бы уже сделали для себя простейший пример и погоняли в разных сочетаниях. Глядишь - и вопросы отпали-бы.

clear: both / left / right отменяет float относительно предыдущих блоков?
А если указан float:left / right, то clear в своём блоке уже не работает?

Мало-ли кто что там пишет своими словами в интернетах... А Вы можете это сами проверить!
Может помощь нужна с тестовым примером?
Да любая простая HTML-болванка подойдёт - можно на ней экспериментировать сколько угодно.
Всяко быстрее будет, чем вопросы задавать и путаться в объяснениях..

 
HTML-болванка
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
<style>
* { margin:0; padding:0; outline:none; }
.class1, .class2, .class3, .class4 { margin:10px; width:100px; height:100px; }
.class1 { float:left; background:#c8c8c8; }
.class2 { float:right; background:#000080; }
.class3 { /* float:left; */ clear:both /* left right both */; background:#008000; }
.class4 { /* float:left; */ clear:both; background:#800000; }
.bred { background: red; }
</style>
</head>
<body>
  <div class="class1"></div>
  <span class="bred">text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text</span>
  <div class="class1"></div>
  <div class="class2"></div>
  <div class="class3"></div>
  <span class="bred">text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text</span>
  <div class="class1"></div>
  text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text
  <div class="class1"></div>
  <span class="bred">text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text</span>
  <div class="class2"></div>
  <span class="bred">text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text</span>
  <div class="class3"></div>
  text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text
  <div class="class4"></div>
  <span class="bred">text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text</span>
  <div class="class3"></div>
  text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text
</body>
</html>

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.10.2016, 08:39
    #39321558
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
svnvladА откуда она возьмется, умелость, если нет ни одного вразумительного объяснения с примерами, чтобы по шагам усвоить этот урок?
Мне, например, понравилась книга http://mexalib.com/view/15288

svnvladПростой вопрос - зачем задавать float, а потом отменять его, если его можно было просто не задавать?
"Задавать" float нужно если тебе нужен плавающий блок... Все остальные действия обуславливаются поведением, следующего за ним, контента...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.10.2016, 08:41
    #39321560
на всякий случай
на всякий случай
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
svnvlad,

http://www.webpress.uz/Alexandr/HTML/Vyravnivanie-DIV-svoystvom-float#.V_XVUylFl58
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Кто-нибудь может объяснить по-человечески смысл свойтв float и clear? / 19 сообщений из 19, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]