关于两栏布局的一个小问题

先贴代码




  
  
  
  两栏
  


  
  
aside
我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main
我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main

问题

如果将content块中main由div改为p标签,并且删去test块,则依然为两栏布局。效果同两个div并列。

关于两栏布局的一个小问题_第1张图片
aside为div,main为p

但此时若不删去test块,test块就会占据一整行:

关于两栏布局的一个小问题_第2张图片
mian作为p标签包含div的情况

若是main为div,则不管aside周围是不是文字(float:left;会出现文字环绕浮动的效果),都可以实现两栏布局:

关于两栏布局的一个小问题_第3张图片
div包含文本和div
关于两栏布局的一个小问题_第4张图片
div包含div

我们知道此时形成两栏布局的原因是main形成了BFC,而main形成BFC的原因是overflow:auto;此时main已经设置了overflow:auto;所以main中的div已经包含在main形成的BFC中,所以两栏布局依然可以实现。而p标签并没有这种效果。

你可能感兴趣的:(关于两栏布局的一个小问题)