[分享]css元素的浮动位置不够

在CSS中，我们可以使用浮动属性来控制页面元素的位置。但是有时候我们会发现，浮动元素的位置不够，这可能会给排版带来困扰。下面就让我们来看看解决方法。.article { float: left; wi...

在CSS中，我们可以使用浮动属性来控制页面元素的位置。但是有时候我们会发现，浮动元素的位置不够，这可能会给排版带来困扰。下面就让我们来看看解决方法。

.article {
  float: left;
  width: 70%;
}

.sidebar {
  float: right;
  width: 30%;
} 

如上述代码所示，我们将文章 (.article) 和侧边栏 (.sidebar) 分别浮动在左边和右边。但是可能会发现，分别浮动在页面左右两端的元素看起来距离很远，造成了大量的留白，这并不是我们想要的效果。

那么解决办法是什么呢？当浮动元素的距离不够时，我们可以通过调整它们的相对位置，使它们更加靠近。有两种方法可以实现这一效果：

.article {
  float: left;
  width: calc(70% - 20px);
  margin-right: 20px;
}

.sidebar {
  float: right;
  width: calc(30% - 20px);
  margin-left: 20px;
} 

第一种方法是添加一个margin属性，使用正数表示向外偏移，使用负数则表示向内偏移。在本例中，我们给文章添加了一个20像素的右margin，给侧边栏添加了一个20像素的左margin。

第二种方法是使用calc()函数。它可以计算出两个值的差，这样我们不用手动指定每个元素的具体宽度，而是让浏览器自行计算。在本例中，我们可以让文章的宽度为70%减去20像素，侧边栏的宽度为30%减去20像素。

综上所述，通过上述两种方法，我们可以很方便地让浮动元素更加靠近，使页面排版更加美观。