css学习一:overflow 和float的搭配使用,实现包裹功能

实现包裹功能:外层的div 嵌套内层div,外层div的高度随内层div的高度改变而改变:

<body>
<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。p>

<div>
    这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
    <div class="bordertest">
        我们是测试用的
    div>
div>
body>

对应的css:

div 
{
border:2px solid #333333;
}

.bordertest
{
    border:1px solid #FF0000;
    width:450px;
    height:20px;
    float:left;
}

则出现如下效果:外层div的高度并不会随内层div改变,没有包裹功能
css学习一:overflow 和float的搭配使用,实现包裹功能_第1张图片

给 外层div增加overflow的功能即可:

div 
{
border:2px solid #333333;
overflow: hidden;
}

你可能感兴趣的:(css)