css基础(3)----左右布局

1.左右布局

如果有以下html结构，设置左右两栏布局

设置浮动：左右布局常用的方法就是为子元素设置浮动，然后在其父元素上使用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操作变换位置时，通常使用浮动。

使用绝对定位时：

需要计算元素的具体位置，比较精确。