Некоторое время назад я задал аналогичный вопрос и получил довольно хороший ответ, теперь я хотел бы немного изменить этот вопрос в свете того, что я заметил при работе с Google Maps.
Вопрос в том, что я всегда использовал <div style="clear:both"></div>
чтобы очистить float. Есть и другие случаи, когда мне нужно было создать пустой элемент, который будет заполнен JS, например. Теперь, поскольку HTML является подмножеством XML, почему я не могу использовать <div style="clear:both"/>
вместо ввода уродливого закрывающего тега.
Мне дали отличный ответ, который я, по общему признанию, не совсем понял в своем предыдущем вопросе, но, работая с Картами Google, я заметил, что у Google была та же идея, что и я. В своем первом примере кода они используют <div id="map-canvas"/>
без конечного тега.
Итак, мой новый вопрос, даже если это не совсем правильный HTML, будет ли когда-нибудь реалистично, когда это не сработает?
Пожалуйста, спасибо.
Теперь, поскольку HTML является подмножеством XML
HTML не является подмножеством XML.
HTML 4 и ранее были SGML-приложениями, но браузеры никогда не применяли спецификацию SGML должным образом.
XHTML 1.x - это приложение XML, но браузеры будут использовать только правила XML-анализа, если вы будете обслуживать XHTML с типом содержимого XML (например, application/xhtml+xml
).
HTML 5 имеет свои собственные правила синтаксического анализа, которые лучше отражают то, что на самом деле делают браузеры. Он позволяет символу /
символу в конце элементов, где конечный тег должен быть опущен ради людей, которые пристрастились к XML или имеют плохое программное обеспечение подсветки синтаксиса, но только те элементы.
Я заметил, что у Google была та же идея, что и я. В своем первом примере кода они используют
<div id="map-canvas"/>
без конечного тега.
Это ошибка и не допускается в HTML. Он работает только в браузерах, потому что конец документа предшествует началу любого элемента или текста, который разрешен как дочерний узел элемента div.
Вопрос в том, что я всегда использовал
<div style="clear:both"></div>
чтобы очистить float.
Это неприятный подход к проблеме в первую очередь. Он требует дополнительного элемента и может добавлять пространство, в котором элемент элемента отображается. Лучше, почти в каждом случае, установить overflow: hidden
в содержащем элементе, чтобы заставить его обернуть поплавки.
HTML не является подмножеством XML. HTML имеет другую структуру. Некоторые элементы являются единственными (например, изображениями) и не нуждаются в закрывающем теге или завершении /
вообще. Те, кто это делает, должны быть закрыты соответствующим закрывающим тегом.
Некоторые люди используют XHTML, хотя это, в основном, HTML с использованием синтаксиса XML. Это зависит от используемого вами типа.
В этом случае пример Google неверен. Он использует Html 5 doctype. Если вы запустите свой фрагмент через валидатор W3, он сообщает вам:
Строка 26, столбец 26: самозакрывающийся синтаксис (/>), используемый для не-void HTML-элемента. Игнорирование косой черты и обработка в качестве начального тега.
<div id="map-canvas"/>
И это то, что, вероятно, произойдет и в большинстве браузеров. Они читали его, как будто там только что открыт. В какой-то момент он будет автоматически закрыт. Параметр /
игнорируется.
Об очистке поплавков: то, как вы это делаете, является старым и уродливым, потому что вам нужна дополнительная разметка, поскольку в основном это проблема с CSS. К счастью, есть более эффективные способы, о которых подробно сказано здесь: Какие методы "clearfix" можно использовать?