/* 方法一：使用 float 属性 */
.box{
float: left;
width: 200px;
}
/* 方法二：使用 display:inline-block 属性 */
.box{
display: inline-block;
width: 200px;
}
/* 方法三：使用 flex 布局 */
.container{
display: flex;
justify-content: flex-start;
}
.box{
flex:1;
}以上是三种常用的左对齐方法，其中第一种是使用 float 属性来达到左对齐的效果。当元素设置了 float 属性之后，它的宽度就会自适应，而且它会浮动到容器的左侧，实现了左对齐的效果。但是它也有一个缺点就是当容器中的元素过多时，会出现一行放不下而被换行的情况。
第二种方法是使用 display:inline-block 属性来实现左对齐，这种方法的优点在于元素不会产生浮动，不会让其他元素换行。但是当元素的宽度和高度很大时，可能会产生多行排列的情况。
而第三种方法是使用 flex 布局来实现左对齐的效果，它的好处在于可以使元素在容器内任意调整位置，而且容易水平垂直居中处理，也不会轻易出现多行排列的情况。但是它要求容器元素必须具有一定的高度或宽度。
以上三种方法，根据实际情况选择应用即可。在进行页面布局时，合理运用 css3 左对齐技术，可以增加页面的美观性和易读性。