在网页设计中，经常需要在一行显示多个元素，当元素的数量太多时，就需要通过换行来进行排列。这时，我们可以使用div元素来实现换行显示。
一种常见的实现方式是将需要换行的元素设置为display: inline-block属性。此时，该元素会以块级元素的方式呈现，并且可以和其他元素共同占据同一行。同时，由于inline-block的特性，元素之间的空格和换行符会被解析成一个空格，需要注意HTML代码的格式。
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: #f7caca;
margin-right: 10px;
}
上面的代码会在同一行显示4个宽高为100px的红色方块，每个方块之间有10px的间距。当父容器的宽度不足以容纳所有元素时，会自动换行。
另一种实现方式是使用float:left或float:right属性。这种方式会使元素脱离文档流，并且与其他元素重叠在一起。需要注意的是，使用float属性要清除浮动，否则会影响后面的元素布局。
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="clear"></div>.box {
float: left;
width: 100px;
height: 100px;
background-color: #f7caca;
margin-right: 10px;
}
.clear {
clear: both;
}
上面的代码和前面的例子类似，不同之处在于添加了一个空元素来清除浮动。
通过display: inline-block或float:left/right属性，可以很方便地实现换行显示。需要注意的是，在使用float属性时要清除浮动，避免影响后续元素的布局。
本文链接：http://task.lmcjl.com/news/2752.html