求解一个CSS的浮动问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {width: 200px;height: 200px;border: solid 1px red;}
.l {float: left;}
p{background: #73bcba;margin: 0;padding:0;}
</style>
</head>
<body>
<div class="box l"></div>
<div class="box"><p>123</p></div>
</body>
</html>

为什么在第一个div浮动之后，P的高度会增加而不是保持在原来相对第二个的位置？不是很理解~求指点

fruitchan

浏览 1542回答 3

3回答

uhelper_net

在现代浏览器和IE8+下，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。

赫兹1719

通常不要这样写代码，<p>在浮动布局中很容易带来一些问题

赫兹1719

这个应该是<p>元素是行内元素的缘故

随时随地看视频慕课网APP