René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"【前端】【学习心得】第十三天 浅谈 BR 标签","articleBody":"HTML 标签元素中`\u003cbr\u003e`应用得场景并不多，我们是否真正了解`\u003cbr\u003e` 元素的语义，其正确使用场景，是否可以用 CSS 来改变其样式，用来清除浮动到底对不对？让我们慢慢剖析`\u003cbr\u003e` 元素，揭开它被忽视的面纱，一睹其神秘的容颜。\n## br 的语义\n\n，我们来看看 W3C 对 `\u003cbr\u003e` 的定义。\n\n\u003e The `\u003cbr\u003e` element represents a line break.\n\u003e This element must be used only for line breaks that are actually part of the \n\u003e content:\n\u003e - poems\n\u003e - addresses\n\n由上可知： `\u003cbr\u003e`元素表示换行，它必须只能被使用作换行，实际上常用于是诗、地址的一部分。\n\n再来看 MDN 上的定义:\n\n\u003e The HTML `\u003cbr\u003e` Element (or HTML Line Break Element) produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.\n\u003e \n\u003e Do not use `\u003cbr\u003e` to increase the gap between lines of text; use the CSS margin property or the `\u003cp\u003e` element.\n\n意思基本一致：  `\u003cbr\u003e`元素(或 HTML 换行符元素)在文本中产生一个折行(回车)。对于写诗和地址，非常有用，行与行的划分变得明显。**不要使用 `\u003cbr\u003e` 来增加行与行之间的间隙**，应该使用 margin 属性或者`\u003cp\u003e`元素。\n\n另值得说明的是 \u003cbr\u003e 是个空元素，到底要不要闭合呢，答案是不需要 HTML5 规范中也推荐不闭合（待查）。\n## `\u003cbr\u003e` 的使用场景\n### 正确使用场景\n\n从上述`\u003cbr\u003e`的定义中， 我们可知 `\u003cbr\u003e` 元素的使用场景很明显，只适合在文本中折行，且这个折行的目的是为了文本本身的需要。例如：\n\n``` html\n    \u003cp\u003e\n        一二三四五，\n        \u003cbr\u003e\n        上山打老虎。\n        \u003cbr\u003e\n        老虎不在家，\n        \u003cbr\u003e\n        嗯哼就是他。\n    \u003c/p\u003e\n```\n\n效果是这样的，熟悉 Markdown 的同学知道如果文本想要换行可以连续打两个空格继续输入（待验证），其实这就是一个`\u003cbr\u003e`\n![ ](http://paddingme.qiniudn.com/21.PNG)\n### 错误使用场景一：用来增加文本行之间的间隙\n\n用来增加文本之间的间隙并不是它的应有用途。\n\n``` html\n\u003cp\u003e我想离一段文字远一点\u003c/p\u003e\n\u003cbr\u003e\n\u003cp\u003e我是一段被远离的文字\u003c/p\u003e\n```\n\n![](http://paddingme.qiniudn.com/22.PNG)\n\n这样使用是不对的，我们应该用 CSS 来做到增加多个文本间的距离（\"margin-botton\"或“margin-top”）。\n### 错误使用场景二: 用来清除浮动\n\n除了被用来增加上下文本间的间距，我们还有一个错误——用`\u003cbr\u003e`来清除浮动。\n\n``` html\n\u003cdiv style=\"float：left\"\u003e我向左浮动了\u003c/div\u003e\n\u003cbr style=\"\"\u003e\n```\n\n查是谁发明了br 用来清除浮动。\n\n首先这严重不符合`\u003cbr\u003e`的语义，其次当浮动元素小于`\u003cbr\u003e` 在浏览器中默认的高度时会出现一定的间隙，为了说清楚这个问题，我们来看个例子：\n\n``` html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n    \u003cstyle\u003e\n    .box {\n        width:100px;\n        height: 100px;\n    }\n    .clear {\n        clear:both;\n    }\n    .red {\n        background-color: red;\n    }\n    .green{\n         background-color: green;\n    }\n    \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"box1\"class=\"box red\"\u003e\u003c/div\u003e\n    \u003cbr\u003e\n    \u003cdiv id=\"box2\" class=\"box green\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n这里没有浮动只有一个换行符，我们可以看到效果是这样的：\n![](http://paddingme.qiniudn.com/hh.PNG)\n\n现在我们 box1 浮动；在上面代码中 设置 `#box1 {flat:left}` 看下效果：\n![](http://paddingme.qiniudn.com/bb.PNG)\n\n如上 box1 浮动导致 `\u003cbr\u003e` 和 box2 都上移。\n\n我们再给`\u003cbr\u003e`加上 `class=\"clear\"`\n![](http://paddingme.qiniudn.com/xx.PNG)\n\n这时候`\u003cbr\u003e`清除浮动 换行符去哪儿了，我猜换行符在红色下面被遮盖了，在清除浮动之前，浮动的影响还存在，`\u003cbr\u003e`clear之后影响才消除，所以 box2 才在下面的位置，意思即 `\u003cbr\u003e` 虽然清除了浮动但它是受到了浮动的影响的。这也是为什么用空元素进行清楚浮动的原因，以及伪元素 after 清楚浮动的原因（待验证）。\n\n`\u003cbr\u003e`在各浏览器有一定的高度。将浮动元素高度设定很低，box1 浮动，`\u003cbr\u003e` 清除 box1 浮动。\n\n``` html\n\u003cbody\u003e\n    \u003cdiv class=\"red\" style=\"float:left;width:10px;height:10px\"\u003e\u003c/div\u003e\n    \u003cbr class=\"clear\"\u003e\n    \u003cdiv class=\"box green\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n```\n\n看下效果：\n![](http://paddingme.qiniudn.com/ss.PNG)\n\n`\u003cbr\u003e` 清除了浮动，仍然会占据一定的位置。可见这并没有达到我们想要的效果，我们想要的是 清除浮动元素之后，之后的元素可以正常紧挨着浮动元素（按正常 margin-top 计算 如果没有则紧挨），而现在凭白多了一段 `\u003cbr\u003e` 的间隙，准确的说是多了浏览器下`\u003cbr\u003e` 的高度减去浮动浮动的元素。\n\n综上我们要坚决抵制用 `\u003cbr\u003e` 来清除浮动，原因有三:\n- 增加了没有意义的标签，增加了代码量。\n- 不符合`\u003cbr\u003e` 的语义\n- 浮动元素高度小于浏览器下 `\u003cbr\u003e` 高度时，得不到我们想要的清除效果。\n\n好了今天就到这里，明天我们将来了解下  `\u003cbr\u003e`在各浏览器的表现，以及能不能使用 CSS 样式来改变其表现，能改变哪些样式，以及为什么只能改变这些样式，以及如何改变。\n","author":{"url":"https://github.com/paddingme","@type":"Person","name":"paddingme"},"datePublished":"2014-11-30T04:28:25.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/17/Learning-JavaScript/issues/17"}