在設置浮動元素后的下一個元素如果內容多的時候會擠下來，這是為什么？

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>浮動布局</title>
<style>
.box1{
height:50px;
background:?red;
float:left;
}
.box2{
height:50px;
background:?blue;
float:left;
}

</style>
</head>
<body>
<div>fff</div>
<div>fff</div>
<p>nihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaihaonihaonihaonihaonihaoni1111ddddddddddddddddddd11111haonihaonihaonihaonihaonihaonihao11111111111dddddddddddddddd1</p>
</body>
</html>

東風破

2015-10-10

源自：網頁布局基礎 3-1

關注問題我要回答

3776

操作

收起

3 回答

烜烜
2016-01-18

因為<p>nihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaihaonihaonihaonihaonihaoni1111ddddddddddddddddddd11111haonihaonihaonihaonihaonihaonihao11111111111dddddddddddddddd1</p>

被認為是一個單詞了，加上word-break:break-all;word-warp:break-word;