多列布局：浮动与显示的优缺点：阻止？

Question

我想要一个CSS布局，左侧有一个侧边栏，为100px。整个网页的宽度必须为400像素。以下不同方法之间的优缺点和一般差异是什么？

方法1

#container {
  width: 400px;
}

#left {
  float: left;
  width: 100px;
}

#main {
  float: left;
  width: 300px;
}

方法2

#container {
  width: 400px;
}

#left {
  float: left;
  width: 100px;
}

#main {
  display: block;
  margin-left: 100px;
}

Answer 1

方法＃2的原因是它使元素在右边的定位不依赖于左边元素的宽度。潜在地，左边的元素可以将右侧的元素推离屏幕，或者如果太小，则可能使页面太左对齐。

Answer 2

你应该使用方法编号1，

并假设#main是div，它已经具有display：block;默认情况下。