浅谈CSS中float、inline-block、position

发表于 | 分类于

float

在PC网站开发中，浮动布局经常用到。通常在运用浮动的时候，会遇到个问题：父容器无法被子元素的内容撑开。就是由于浮动的子元素
脱离了父容器。看下面的例子：

html
1
2
3
<div class="warp clearfix">
  <div class="left">left，宽度固定，高度可固定也可以由内容撑开。</div>
</div>
css
1
2
3
4
5
6
7
8
9
.warp{
  background-color: #D66464;
}
.left{
  float: left;
  width: 100px;
  background: #00f;
  height: 180px;
}

解决办法：

①父容器也浮动

1
2
3
.wrap{
  float:left;
}

②清除浮动

1
2
3
4
5
.clearfix:after{
  content:"";
  clear:both;
  display:block
}

避免float出现此类问题的方法，用display:inline-block替代float

在使用相对定位position:relative或者绝对定位position:absolute时，如果绝对定位或者相对的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指position值不是static的元素。