开始

前端学习_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属性的元素,并以其为相对标准。

posted @ 2015-04-22 22:06  Lyon2014  阅读(419)  评论(0编辑  收藏  举报