前端学习_03_块元素的浮动、摆放

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属性的元素，并以其为相对标准。

转载于:https://www.cnblogs.com/lyon2014/p/4448854.html