1.左右布局
如果有以下html结构，设置左右两栏布局
<div class="parent">
<div class="leftChild"></div>
<div class="rightChild"></div>
</div>
设置浮动：左右布局常用的方法就是为子元素设置浮动，然后在其父元素上使用clearfix类清除浮动。示例
.clearfix::after{
content:"";
display:block;
clear:both;
}
.leftChild,
.rightChild{
float:left;
}
设置position绝对定位：为父元素设置position:relative; 为子元素设置position:absolute 。示例
.parent{
position:relative;
}
.leftChild{
position:absolute;
left:0;
top:0;
}
.rightChild{
position:absolute;
right:0;
top:0;
}
2.左中右布局
左中右布局的原理与左右布局一致，灵活选用浮动float或者绝对定位的方案来实现
3.float和绝对定位的选择
使用float时：
因为浮动的元素是inline-block，因此虽然不用考虑精确的元素位置，但需要确保元素不会因为宽度而自动换行。
一般在导航栏使用float布局。
当某些元素的位置要根据父元素的大小自适应，内容宽度无法确定时，通常使用浮动。
当特定元素的位置是相对父元素固定，或者内容宽高确定，需要精确定位甚至以后要用js操作变换位置时，通常使用浮动。
使用绝对定位时：
需要计算元素的具体位置，比较精确。
