why did CSS display none(or float) cause line break

Question

div tag will make new line before and after itself.

And

display : none

make this div invisible , and it will not take up any space.

but something makes me confused, see source code:

<p>There is<div style="display:none"></div> a paragraph</p>

I think the result will be :

There is a paragraph

but, the truth is :

There is 
a paragraph

what happened?

and with float, I see this problem again ,for example:

<p>this is a paragraph <div style="float:left; background:blue;">something..</div>  within a div</p>

expected:

something... this is a paragraph within a div

truth:

this is a paragraph
something... within a div

Answer 1

According to the W3C HTML4 specs, p elements cannot contain block level elements, not even another p.

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

This goes for any block level elements set to display as inline, or inline-block- which still remain block level elements in this context (within a p).

Theres also an interesting comment as to why this may be in the W3C HTML5 specs

The solution is to realise that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example above*, there are actually five paragraphs as defined by this specification: one before the list, one for each bullet, and one after the list.

*This refers to an example of a p tag containing a ul with 5 li items

Authors wishing to conveniently style such "logical" paragraphs consisting of multiple "structural" paragraphs can use the div element instead of the p element.

Answer 2

<p> tags are implicitly closed before the next block level element.

If you inspect the DOM with the browser's dev tools, you'll probably see something like this:

<p>There is</p>
<div style="display:none"></div> 
a paragraph
<p></p>

The fact that the block level element (<div>) has been styled to not display doesn't change the behavior.

Answer 3

• The end tag for a paragraph is optional
• You can't have a div element inside a paragraph.

So your code says:

<p>

Start of paragraph

There is

Text

<div style="display:none"></div>

End of paragraph, start of div, end of div

 a paragraph

Text

 </p>

End tag for element that isn't open.

---

The first paragraph is a block, so there is a line break before and after it.

The second set of text is outside that block, so it appears on a new line.