overflow:hidden为什么使原本应该有的文字环绕效果没有了?

请直接复制以下代码运行。问题:有class属性的内层div浮动,p元素应该文字环绕内层div。但是给p元素添加一个overflow:hidden之后,就没有文字环绕了,而是p元素的文字直直的下来了。请问为什么会是这种效果?

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

*{margin: 0;padding: 0;list-style: none;}

#div{width: 300px;height: 300px;background: #ccc;}

#div div{width: 100px;height: 100px;background: blue;float: left;}

p{overflow: hidden;}

</style>

</head>

<body>

<div id="div">

<div class></div>

<p>来得及落实领导及法律来得及落实领导及法律来得及落实领导及法律来得及落实领导及法律来得及落实领导及法律来得及落实领导及法律来得及落实领导及法律来得及落实领导及法律来得及落实领导及法律</p>

</div>

</body>

</html>


qq_Up_2
浏览 1357回答 1
1回答

侠客岛的含笑

在设置了 width 或 height 的div中,写上overflow:hidden;的话,超出宽度或高度的部分,就隐藏了。就是说,这个overflow:hidden;属性可以保证div的高度或宽度不变。div里添加的东西再多,高度或宽度也不变。超出的部分隐藏。所以说,他就溢出不了了块元素都是独占一行的
打开App,查看更多内容
随时随地看视频慕课网APP