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)