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

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

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

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

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

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

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

Что значит "не будет поднят вверх, как от него ожидается"?? Где написано, что float поднимает элемент вверх?
...
Рейтинг: 0 / 0
05.10.2016, 19:11
| Ответить | Цитировать | Написать  
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
    #39321488
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
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, 01:32
| Ответить | Цитировать | Написать  
Кто-нибудь может объяснить по-человечески смысл свойтв float и clear?
    #39321558
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
svnvladА откуда она возьмется, умелость, если нет ни одного вразумительного объяснения с примерами, чтобы по шагам усвоить этот урок?
Мне, например, понравилась книга http://mexalib.com/view/15288

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

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


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