p标签嵌套块级元素的一个小注意点

刚才在写一个项目的时候，出现了如下的问题：请看图：
代码如下：

但是在浏览器上标签的渲染是这样的：

最外层的p标签被截断了，然后又自动补全首尾了。

对，确实是这样的。
这是由浏览器的内核决定的。

p标签里面是不能嵌套块级元素的，p标签本身就是块级元素，所以就会造成这样的效果。

这是一个小点，但是在笔试题中经常出现的：
下面是我笔试百度的时候遇到的题：
问：

<p>1<p>2</p></p>

在浏览器上渲染成什么样子？
答案如下：

下面给大家出道题目，你们想一下在浏览器中会渲染成什么样子？

	<div class="wrapper">
		<p>
			<span>帅气的男孩</span>
			<p>可爱的女孩</p>
		</p>
		<p>
			<span>智慧的老者</span>
			<div>孤独的div</div>
		</p>
	</div>
	<p>
		1
		<p>2</p>
		<span>3</span>
		<p>3</p>
	</p>

今天分享的是一个小点，但是稍微不注意就会入坑。
请大家还是很积累一下，这是很基础细节的东西，也是决定你知识深度的关键和牢固程度。
感谢大家的阅读！