首页 > 代码库 > css float

css float

2024-09-05 08:17:45   214人阅读

 

带有float属性的元素，脱离文档流，具有block元素特征。

　　　　

<ul class="wrapper">
    <li class="a"></li>
    <li class="b"></li>
</ul>
.wrapper{
    background-color: #e5e5e5;
}
.a{
    background-color: #ccffe6;
    width: 200px;
    height: 100px;
    float: left;
}
.b{
    background-color: #ff99ff;
    width: 200px;
    height: 100px;
    float: left;
}

a,b元素都设置为float，脱离文档流，wrapper的高度为0。

技术分享

浮动元素影响其它元素的左侧或右侧行框的宽度，使行框元素围绕在浮动元素周围。

 

.wrapper{
    background-color: #e5e5e5;
}
.a{
    background-color: #ccffe6;
    width: 200px;
    height: 100px;
    float: left;
}
.b{
    background-color: #ff99ff;
}

 

a元素设置为float，b元素的宽度仍为wrapper的宽度，但浮动元素右侧的b元素的行框宽度缩短，使文字从浮动元素的左侧开始。

技术分享

 

使用clear清除浮动

 

给受浮动影响的元素添加clear属性，清除浮动的影响。clear有left、right、both属性，left表示清除元素左侧浮动的影响，right表示清除元素右侧浮动元素的影响。

.wrapper{
    background-color: #e5e5e5;
}
.a{
    background-color: #ccffe6;
    width: 200px;
    height: 100px;
        float: left;
}
.b{
    background-color: #ff99ff;
    clear: left;
}

b元素使用clear属性，属性值为left，表示清除左侧浮动元素a的影响，因此b元素的前面几行受浮动元素的行框，排在a元素的下面，避免了浮动元素a的影响。

技术分享

使用clear属性使浮动元素撑开父元素

<ul class="wrapper">
    <li class="a">a</li>
    <li class="b">b</li>
</ul>
.wrapper{
    background-color: #e5e5e5;
}
.a{
    background-color: #ccffe6;
    width: 200px;
    height: 100px;
    float: left;
}
.b{
    background-color: #ff99ff;
    width: 200px;
    height: 100px;
    float: left;
}
.wrapper:after{
    content: ‘‘;
    display: block;
    height: 0;
    width: 0;
    clear: both;
    visibility: hidden;
}

在b元素后面添加一个伪元素，伪元素使用clear属性，值为both。使伪元素的左右两侧不受浮动元素的影响，因此伪元素相对于a、b元素令起一行。浮动元素在伪元素的上面，因此wapper的高度被float元素撑开。

技术分享

 

css float


联系
我们