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

最新推荐文章于 2022-09-29 20:57:58 发布

ccxuxuxu

最新推荐文章于 2022-09-29 20:57:58 发布

阅读量1.6k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/hahayikeshu/article/details/52204520

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现包裹功能：外层的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改变，没有包裹功能

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

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

ccxuxuxu

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css学习一：overflow 和float的搭配使用，实现包裹功能

实现包裹功能：外层的div 嵌套内层div，外层div的高度随内层div的高度改变而改变：<body><p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p><div> 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
复制链接

扫一扫