[分享]css中float垂直对齐方式在哪

CSS中的float属性是对元素进行浮动控制的方法之一。在布局中，元素的水平对齐可以很容易地通过调整margin和padding值来实现，但垂直对齐却有一些复杂。 在CSS中，float的垂直对齐方式...

CSS中的float属性是对元素进行浮动控制的方法之一。在布局中，元素的水平对齐可以很容易地通过调整margin和padding值来实现，但垂直对齐却有一些复杂。
在CSS中，float的垂直对齐方式取决于它所处的上下文。如果一个浮动元素处于一个非浮动元素的上下文中，它将会对齐到该上下文的基线。如果该浮动元素处于浮动元素上下文中，它将会对齐到同样基线的浮动元素。
如果你需要对齐浮动元素在整个页面中的位置，你需要使用其它CSS属性，如position或者display。比如，你可以使用position: relative和top/margin-top属性来调整元素垂直位置。或者使用vertical-align属性把浮动元素和其它元素垂直对齐。
下面是一些CSS代码示例来展示如何使用float进行垂直对齐：

/*基线对齐*/
p {
  line-height: 30px;
}
img {
  float: left;
  margin-right: 10px;
  margin-top: 5px;
}
<br>
/*浮动元素对齐*/
.container {
  float: left;
}
.float {
  float: left;
  margin-right: 10px;
  margin-top: 5px;
}