css属性 content

　　对css一直没有很系统得学习过,练习得也不是很多,纯小白.今天在写一个页面的时候,遇到一个问题,就是如何让外面的盒子适应里面的盒子大小,完美地把小盒子包在里面.

　　由于里面是一个列表 ul,为了让元素横排,我使用了float:right这个属性,所以列表悬浮了.如图:

 

　　其实当然可以直接给外层id为outer的盒子定义长和宽,但我不想这样.下面是解决方法:

　   #outer ul:after{ /*使用afer伪类,用content在ul后面随便添加一点内容*/

　　　　content:"."; 　　

　　　　display:block; /*表示为块级元素*/

　　　　height:0; /*将content高度设置为0,使不影响其他样式*/
　　　　clear:both; /*清楚浮动,否则该层会在ul之上结束 */
　　　　visibility:hidden; /*隐藏它*/
　　}

 

　　这样就能得到想要的效果