1.设置浮动属性
通过设置块的float属性可以实现浮动。如float:right，则该块会脱离一般布局，在右侧浮动显示。此时，其他块会忽略该块的占位，按照一般布局排布。所以会出现浮动块元素和其他元素重叠的情况。
清除浮动：为了消除某个块会被其他浮动的块盖住，设置clear属性，如clear:right，则该块的右侧不允许出现浮动，当有其他块浮动到右侧的时候，会置于浮动块的下方排布。clear:both，则块的两侧都不允许出现浮动。
利用浮动属性可以实现两栏布局：
.superblock{
width: 250px;
height: 300px;
background: red;
margin:0 auto;
}
.block_common{
height: 100px;
width: 100px;
font-size: 30px;
}
.block1{
color: orange;
background: blue;
float:right;
}
.block2{
color: blue;
background: orange;
float:left;
}
注意，由于浮动时脱离了一般布局，所以不仅浮动元素下方块会忽略浮动的高度，浮动块的父元素同样也会忽略其高度，如果.superclass中不设置高度属性，则不能显示父元素，因为此时该元素没有包括其他任何元素，高度为0。这样设置高度并不是很好，因为直观上superclass就是包括这两个浮动块的，如果superclass下面有其他的块，不设置superclass的高度会使下面的块也同时上移，虽然可以通过设置下面的块clear:both来解决，但也不是很好的解决方法。
2.clearfix
针对上述的问题，可以在superclass的下方添加一个元素，并设置clear:both，可以达到较好效果，但是平白多了一个div，仍然不是很好的解决方式。完成类似的工作可以通过添加：
.superblock:after{
content: “”;
clear: both;
display:block;
}
此时即在superblock后面添加了一个块，默认是行内元素，所以需要改变为block，设置属性为clear:both，content内容为“”。
将该样式设置为复用属性：clearfix：
.clearfix:after{
content: “”;
clear: both;
display: block;
}
这样在需要任何需要清除浮动的块中复用改属性就能实现。
完整逻辑的clearfix：
.clearfix(){
&:before,
&:after{
content: ””;
display: table;
}
&:after{
clear: both;
}
}
除了复用样式外，在需要清除浮动的块属性中引用.classfix()即可：
.superblock {
.clearfix();
}
3. 块元素任意位置摆放
除了float之外，还有另外的方式跳出一般摆放流程：position:absolute属性：
.block{
position: absolute;
top: 10px;
left: 10px;
}
此时，.block在离上方10px，离左方10px的位置显示。
如果想要在相对父类的位置显示，则在父元素中添加属性：position:relative，也可以在父类的父类添加该属性，则会在父类的父类中的相对位置显示，可以认为默认在*元素中有属性 position:relative，而添加了position: absolute的属性则会在祖先链中以此找具有position:relative属性的元素，并以其为相对标准。