1.使用float属性
float:none;是默认值。
float:left;让元素浮动到左边,其他元素围绕在它的右边。
float:right;让元素浮动到右边,其他元素围绕在它的左边。
浮动的元素对文档流的影响与非浮动元素的影响的不同的,它并不会影响父元素或其他祖先元素的高度,因此从这一点来说,它不属于文档流的一部分,只有普通文档流中的内容会影响父元素的高度,因此若一个div内都是浮动元素,那么该div的高度实际为0。
有时候当我们页面布局的时候,一个元素浮动在左边,一个元素浮动在右边,接下来的元素我们希望按正常流布局,在浮动元素的下面。然而却发现下面的元素挤在了浮动元素的中间,就说明了浮动元素不影响文档流。
为了解决这个问题,我们可以使用clear属性清除浮动效果。如果对某个元素使用该属性,该元素和它后面的元素就会显示在浮动元素的下面。分别用clear:left;clear:right;和clear:both;依情况而使用。
大多数时候,这样做没有问题。但如果希望为容器添加一个背景色,由于容器的高度为0,不会显示该背景色。解决的是让容器自身具有清除浮动的能力。
有很多方法可以解决这个问题,但最可靠的使用clearfix方法,只要在css中引入.clearfix规则,然后为浮动元素的父元素添加clearfix类
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
通常也可以使用overflow属性创建自清除浮动元素。
需要注意的是:clear属性是添加到不希望环绕浮动对象的元素上,而clearfix类和overflow属性是应用于浮动元素的父元素或祖先元素的。
2.使用position属性
每个元素在页面的文档流中都有一个自然位置。相对于这个原始位置对元素进行移动就称为相对定位。
.example{
position: relative;
top: 1em;
left: 1em;
}
通过对元素进行绝对定位,即指定它们相对于body或最近的已定位祖先元素,可以让元素脱离正常的文档流。
.example{
position: absolute;
top: 1em;
left: 1em;
}
无论是relative还是absolute,距离数字可正可负,单位可以是px、em、rem。
3.display属性
正常情况下列表都是从上往下依次排列,为了实现上图的布局,我一般都会使用display: inline-block;
,然后在调节元素的margin和padding属性即可。