p元素包含div元素的问题

    我们都知道div可以包含块状元素和行内元素，包括p元素，但是p元素包含div会怎么样呢，下面就来试验一下吧：

    首先：

    

    

        

            asdfghjkl
        
    

    结果是这样的：

    然后，我们仔细分析到底是什么促成了如此诡异的布局

    在p元素和div元素之间写下一个字符串，选中p元素的第一个子元素

    

    
qwertyuiop
        

            asdfghjkl
        
    

    原来div上面的那一条斑点边框不是一条，而是两条，只不过原来没内容重叠在一起了

    那么第三个元素就是div和p之间的内容了？再在div下面添加一行字符串，用css选中第三个元素：

    

    
qwertyuiop
        

            asdfghjkl
        
        zxcvbnm
    

   
    啊啊啊，可以看出添加的字符串既不属于div又不属于p ，两个元素之间的字符串完全被抛弃了

    由此，我们看出，p元素被div分割成了三块块状元素，并且第三块是有问题的。在p元素中添加div元素是无法控制格式的，所以不建议在p元素内添加div元素是有原因的，除非你特别牛逼，能算出来到底该怎么布置

注：以上全部显示结果是在Firefox浏览器中实现的，由于博主太懒没有在其他浏览器中打开（主要是畏惧上传图片的流程哈哈）