2018-05-22 CSS 左右布局、左中右布局以及一些小技巧

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;
  <