What does do exactly?

Question

Can anyone explain what <br /> does to the page? The result is unexpected. I tested the code on the latest version of Chrome and Firefox, the result is the same on both browsers. So there must be some explanation to this. I am not trying to do a clearfix. I am just curious how it happened.

<br/> used with position:absolute;:

.box{
  position: absolute;
  padding:1em;
  border:1px solid black;
}

<div class="box"></div>
<br/>
<div class="box"></div>

<br/> used with float:left;:

.box{
  float:left;
  padding:1em;
  border:1px solid black;
}

<div class="box"></div>
<br/>
<div class="box"></div>

Answer 1

As mentioned, the br element introduces a line break. How exactly this element is implemented in CSS varies greatly across browsers, but as you're dealing with two block-level boxes, I'm not surprised the behavior is consistent here.

The difference in behavior between floating and absolute positioning is that floats never intersect with each other normally (unless you force them to, using negative margins), whereas absolutely positioned elements can intersect because they're not aware of one another (and neither is the rest of the layout).

But note that position: absolute by itself does not change an element's static position (i.e. where it would otherwise be if it wasn't absposed). See the following questions:

• Why is a div with "position: absolute" not by default relative to the document?
• What are the default top, left, botton or right values when position:absolute is used?

This is why the br affects the layout of the second absolutely positioned element. If you hide the first element, it becomes much clearer that the br is just starting on the first line of the document, unaware of the first element, but the second element is aware of the br:

.box {
  position: absolute;
  border: 1px solid black;
  padding: 1em;
}

.box:first-child {
  visibility: hidden;
}

<div class="box"></div>
<br>
<div class="box"></div>

As for floats, the CSS2.1 spec says that floating elements cannot be higher than the line box containing the box of a preceding element. I'm guessing that the br generates an inline box that lives in a new line box, rather than at the end of the previous line (as you would expect of a carriage return), which is why the second floating element starts at the second line of the document rather than the first line.

Answer 2

<br>(<br/> is in XHTML) is a line break. It is analogous to the ASCII character CR(carriage return). It is an inline element, which means it's designed to be used inside text in divs and as a part of spans etc.

In your code, as the br is analogous to adding a CR, the effect will be the same as adding a line of text above the second block in place of the br.

I've done so here:

.box{
  position: absolute;
  padding:1em;
  border:1px solid black;
}

<div class="box"></div>
abc
<div class="box"></div>

Above, the position is absolute, so the divs were superimposed on one another. Adding the br has caused the second one to move down one line.

Below, the text is added above the second block, but the blocks don't superimpose, and float to the left.

.box{
  float:left;
  padding:1em;
  border:1px solid black;
}

<div class="box"></div>
abc
<div class="box"></div>

Reference: Mozilla Developer Network: <br> Element

Reference 2: Learn CSS Positioning in Ten Steps

Answer 3

I think I know what's going on. Because both divs are of class box, both are float left, but because you are breaking the line between the first and second, the break is applied before the second box, hence it's pushed down one line.

<br />, is intended to be used to separate text. If you want to move position of divs, CSS styling is definitely the way to go.

Answer 4

The unexpected results is not caused by the <br /> it's caused by the position:absolute and the float:left.

position:absolute works like when you add an image to a word document, and you choose 'display in front of text', which is what caused the two divs in the first example to intersect into each other.

float:left: I can explain it as the gravity for these items now is pulling them to the left, hence the <br /> made the other div little bit lower but next to each other.

I am a little surprised by 1st result though as I expected the both divs will exactly match over each other with no affect from the <br />.

Answer 5

The <br> tag can be related to a carriage return. Another way to think of this is that it is a <div>, except that it doesn't have any content.

Css can be used to hold formatting of text as well. Use white-space:pre; to keep the content's formatting, like spaces and line-ends.

Links that can help you:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
http://www.w3schools.com/tags/tag_br.asp

UPDATE:
I overlooked your other question. The unexpected results are more responsible to what you did with the css 'position:' value, and how they then affect the <br>. Remember: the <br> tag is not exactly a line-break, so it still is affected by other css attributes. It can even be possible to apply css to the <br>, although if you do this, I recommend to simply use the white-space:pre css code on the parent, or use a <span> to achieve this.

Answer 6

The <br /> tag is equivalent to <br> in HTML5. Basically, it means that break at that point and goes to new line. For example:

<p> hello world<br><br> how are</p>

Output is :

hello world

how are

After hello world it jump to next line then again jump to another next due to another break statement.

In html some elements are block elements which means that they automatically break into new line after complete like div, h1 after complete they control jump to new line but some elements are inline elements that had not capability to jump into new line like p, span. So br is used to break the line in html.