十、一行多个：使用float布局的经典方法 ---接（一）

1、使用float必须要清除float：即在使用float元素的父级元素上清除float。

清除float的方法有三种，在父元素上加：1、 width: 100% 或者固定宽度  overflow:hidden;或者 overflow: auto; 

                                                               2、clear:both

                                  3、（推荐）在父级元素上增加伪类

.clearfix:before {display: table;content: "";line-height: 0;}
.clearfix:after{clear: both;}
.clearfix:after,.clearfix:before {display: table;content: "";line-height: 0;}

2、经典布局：

每一个块都是通过一个div循环出来的。所以中间的div由于经验不足不知道如何创建间隔，总是所有的div都挤在一起。请教大神后的解决办法居然有两种，下面娓娓道来：

对于这个的布局有两种很经典的方法：（！！！外面的空白全部使用padding-left来进行撑开！！！）

• 使用百分比

#interesting_Sec{ background-color: #fff; padding-left: 15px; padding-right: 10px; width: 100%; margin-left: -2%; }

#interesting_Sec div { height: 155px; float: left; width: 31.33%; margin-left: 2%; box-sizing: border-box; border: 1px solid rgba(217,217,217,0.50); border-radius: 2px; background-color: #fff; margin-top: 10px; }

 

• 在DIV的外面再包一层

#interesting_Sec { background-color: #fff; padding-left: 10px; padding-right: 10px; width: 100%; } .interesting_div { height: 155px; float: left; width: 33.33%; box-sizing: border-box; background-color: #fff; margin-top: 10px; } 左 左右padding都是10px这样对DIV实现margin:0 5px;就可以实现左右间距都为5px;

.interesting_div div { margin: 0 5px; } .interesting_div div { border: 1px solid rgba(217,217,217,0.50); border-radius: 2px; }