为什么添加overflow属性后段落位置发生改变
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
float: left;
background: red;
width: 400px;
}
p{
width: 300px;
height:150px;
text-align: justify;
background: green;
/*overflow:hidden; */
}
</style>
</head>
<body>
<div>
<img src="img/1.jpg" style="width: 200px;vertical-align: bottom;">
</div>
<p>《路人女主的养成方法》是剧本作家丸户史明首日本剧丸户史的部轻小说著作、由插画家深崎暮人负责插图。单行本由日本的富士见书房出版发行，繁体中文版有中国台湾的台湾角川书店代理发行。该作品是缔造“贩售即完售”的话题作品，日本出版第一集时，仅仅出版四天便随即宣布紧急再版，且从第一刷（2012年7月）出版至同年11月已累计再版至第五刷的佳绩。日本出版第二集的同时，宣布本作在日本三本漫画杂志上连载漫画版。作品亦改编成同名电视动画。</p>
<div style="width: 300px;height: 400px;background: blue;">
</div>
</body>
</html>
为什么添加overflow：hidden后<p></p>内容的位置会发生改变
由
变为
正在回答
你好，1、当 不设置 overflow:hidden时
样式如图测试时为了准确对比效果红色背景删除，
此时因为div设置了float所以p标签的位置绿色背景在图片下方，因为设置float则脱离了文档流，但是没有脱离文本流，所以字体部分没有被覆盖，
2、当添加overflow:hidden后，如图：
此时overflow:hidden相当于是清除浮动效果不在脱离文档流，但是还是有left的效果，如果解决您的问题请采纳祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星