对css一直没有很系统得学习过,练习得也不是很多,纯小白.今天在写一个页面的时候,遇到一个问题,就是如何让外面的盒子适应里面的盒子大小,完美地把小盒子包在里面.
由于里面是一个列表 ul,为了让元素横排,我使用了float:right这个属性,所以列表悬浮了.如图:
其实当然可以直接给外层id为outer的盒子定义长和宽,但我不想这样.下面是解决方法:
#outer ul:after{ /*使用afer伪类,用content在ul后面随便添加一点内容*/
content:".";
display:block; /*表示为块级元素*/
height:0; /*将content高度设置为0,使不影响其他样式*/
clear:both; /*清楚浮动,否则该层会在ul之上结束 */
visibility:hidden; /*隐藏它*/
}
这样就能得到想要的效果
