html代碼：
<body><div class="div01">div01</div><div class="div02"> <div class="nei01">nei1</div> <div class="nei02">nei2</div> <div class="nei03">nei3</div> <div class="nei04">nei4</div> <div class="nei05">nei5</div> <div class="nei06">nei6</div> <div class="nei07">nei7</div> <div class="nei08">nei8</div> <div class="nei09">nei9</div> <div class="nei10">nei10</div> <div class="nei11">nei11</div> <div class="nei12">nei12</div> <div class="nei13">nei13</div> <div class="nei14">nei14</div></div><div class="div03">xuhaitaoxuhaitaoxuhaitaoxuhaitaoxuhaitaoxuhaitaoxuhaitao</div></body>
如果CSS設定如下：
<style> .div01 { margin-top: 50px; width: 300px; height: 200px; background-color: burlywood; } .div02 { margin-top: 5px; width: 400px; height: 400px; background-color: aqua; } .div03 { margin-top: 5px; width: 300px; height: 200px; background-color: thistle; font-size: xx-large; color: fuchsia; word-break: break-all; } .nei01,.nei02,.nei03,.nei04,.nei05,.nei06,.nei07,.nei08,.nei09,.nei10,.nei11,.nei12,.nei13,.nei14{ margin-top: 3px; marign:5px; width:150px; height:50px; background-color: blueviolet; font-size: xx-large; } </style>
效果如下：
總結：雖然nei9,nei10,nei11,nei12,nei13,nei14這幾個元素超出其所在容器(div02)的邊界，但是因為容器div02被設定高度，因此div03在流中布局時，是不會受到div02內容超出邊界的影響，但是顯示很不好看，建議不要超出邊界，如果超出邊界使用overflow：hidden 將超出部分隱藏，或者乾脆就不要設定高度，高度由需求來定
下面取消掉div02的高度，如下：
效果如下：
總結：因為div02沒有設定高度，自己實際需要多少就定多少
下面再對上面的CSS做一下修改：
效果畫面如下：
最後補充：
FR：徐海濤（QQ技術交流群：386476712）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
