解决：子元素设置浮动后溢出

最新推荐文章于 2021-12-17 11:13:38 发布

睿oba

最新推荐文章于 2021-12-17 11:13:38 发布

阅读量335

点赞数

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

本文链接：https://blog.csdn.net/chanzhiliao/article/details/119144853

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<style>
div {
    border: 3px solid #4CAF50;
    padding: 5px;
}
.img1 {
    float: right;
}

</style>
</head>
<body>
<p>以下实例图在父元素中溢出，很不美观:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
v都喜欢发货</div>

</body>

<style>
div {
    border: 3px solid #4CAF50;
    padding: 5px;
}
.clearfix {
    overflow: auto;//父元素设置溢出为自动
}
.img2 {
    float: right;//子元素设置浮动
}
</style>
</head>
<body>
<p style="clear:right">在父元素上通过添加 clearfix 类，并设置 overflow: auto; 来解决该问题:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
的的工作人大概</div>
</body>

父元素设置overflow：auto