盒子
目录
文章目录
  1. br 的语义

  2. 的使用场景
    1. 正确使用场景
    2. 错误使用场景一:用来增加文本行之间的间隙
    3. 错误使用场景二: 用来清除浮动

【前端】【学习心得】第十三天浅谈 BR 标签

文章取自我的 Github repos: Learning-JavaScript, 作者:@paddingme
原文链接:https://github.com/paddingme/Learning-JavaScript/issues/17

HTML 标签元素中<br>应用得场景并不多,我们是否真正了解<br> 元素的语义,其正确使用场景,是否可以用 CSS 来改变其样式,用来清除浮动到底对不对?让我们慢慢剖析<br> 元素,揭开它被忽视的面纱,一睹其神秘的容颜。

br 的语义

,我们来看看 W3C 对 <br> 的定义。

The <br> element represents a line break.
This element must be used only for line breaks that are actually part of the
content:

  • poems
  • addresses

由上可知: <br>元素表示换行,它必须只能被使用作换行,实际上常用于是诗、地址的一部分。

再来看 MDN 上的定义:

The HTML <br> 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.

Do not use <br> to increase the gap between lines of text; use the CSS margin property or the <p> element.

意思基本一致: <br>元素(或 HTML 换行符元素)在文本中产生一个折行(回车)。对于写诗和地址,非常有用,行与行的划分变得明显。不要使用 <br> 来增加行与行之间的间隙,应该使用 margin 属性或者<p>元素。

另值得说明的是
是个空元素,到底要不要闭合呢,答案是不需要 HTML5 规范中也推荐不闭合(待查)。

<br> 的使用场景

正确使用场景

从上述<br>的定义中, 我们可知 <br> 元素的使用场景很明显,只适合在文本中折行,且这个折行的目的是为了文本本身的需要。例如:

1
2
3
4
5
6
7
8
9
<p>
一二三四五,
<br>
上山打老虎。
<br>
老虎不在家,
<br>
嗯哼就是他。
</p>

效果是这样的,熟悉 Markdown 的同学知道如果文本想要换行可以连续打两个空格继续输入(待验证),其实这就是一个<br>

错误使用场景一:用来增加文本行之间的间隙

用来增加文本之间的间隙并不是它的应有用途。

1
2
3
<p>我想离一段文字远一点</p>
<br>
<p>我是一段被远离的文字</p>

这样使用是不对的,我们应该用 CSS 来做到增加多个文本间的距离(”margin-botton”或“margin-top”)。

错误使用场景二: 用来清除浮动

除了被用来增加上下文本间的间距,我们还有一个错误——用<br>来清除浮动。

1
2
<div style="float:left">我向左浮动了</div>
<br style="">

查是谁发明了br 用来清除浮动。

首先这严重不符合<br>的语义,其次当浮动元素小于<br> 在浏览器中默认的高度时会出现一定的间隙,为了说清楚这个问题,我们来看个例子:

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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width:100px;
height: 100px;
}
.clear {
clear:both;
}
.red {
background-color: red;
}
.green{
background-color: green;
}
</style>

</head>
<body>
<div id="box1"class="box red"></div>
<br>
<div id="box2" class="box green"></div>
</body>
</html>

这里没有浮动只有一个换行符,我们可以看到效果是这样的:

现在我们 box1 浮动;在上面代码中 设置 #box1 {flat:left} 看下效果:

如上 box1 浮动导致 <br> 和 box2 都上移。

我们再给<br>加上 class="clear"

这时候<br>清除浮动 换行符去哪儿了,我猜换行符在红色下面被遮盖了,在清除浮动之前,浮动的影响还存在,<br>clear之后影响才消除,所以 box2 才在下面的位置,意思即 <br> 虽然清除了浮动但它是受到了浮动的影响的。这也是为什么用空元素进行清楚浮动的原因,以及伪元素 after 清楚浮动的原因(待验证)。

<br>在各浏览器有一定的高度。将浮动元素高度设定很低,box1 浮动,<br> 清除 box1 浮动。

1
2
3
4
5
<body>
<div class="red" style="float:left;width:10px;height:10px"></div>
<br class="clear">
<div class="box green"></div>
</body>

看下效果:

<br> 清除了浮动,仍然会占据一定的位置。可见这并没有达到我们想要的效果,我们想要的是 清除浮动元素之后,之后的元素可以正常紧挨着浮动元素(按正常 margin-top 计算 如果没有则紧挨),而现在凭白多了一段 <br> 的间隙,准确的说是多了浏览器下<br> 的高度减去浮动浮动的元素。

综上我们要坚决抵制用 <br> 来清除浮动,原因有三:

  • 增加了没有意义的标签,增加了代码量。
  • 不符合<br> 的语义
  • 浮动元素高度小于浏览器下 <br> 高度时,得不到我们想要的清除效果。

好了今天就到这里,明天我们将来了解下 <br>在各浏览器的表现,以及能不能使用 CSS 样式来改变其表现,能改变哪些样式,以及为什么只能改变这些样式,以及如何改变。