浮动float：使用伪类实现，简单易操作

最新推荐文章于 2021-10-23 12:19:05 发布

liusslove

最新推荐文章于 2021-10-23 12:19:05 发布

阅读量664

点赞数

分类专栏： php 文章标签： float

本文链接：https://blog.csdn.net/liusslove/article/details/60768417

版权

php 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

元素需要浮动时，如果每个标签元素都浮动或者取消浮动会比较凌乱，如果使用伪类

<html>
<body>
<style>
    /*所有的子元素都浮动*/
 .divall >*{
    float: left;
 }
    /*伪类清除浮动*/
.divall:after{
    content: '.';/*在.divall后添加元素*/
    display: block;/*为块级元素*/
    height: 0;
    clear: both;/*清除说有浮动*/
    visibility: hidden;
}

</style>

<div class="divall">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

<div>
    hhhhhhh
</div>


</body>
</html>

方法二：

<html>
<body>
<style>
    /*所有的子元素都浮动*/
 .divall >*{
    float: left;
 }

</style>

<div class="divall">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<div style="clear: both"></div>
<div>
    hhhhhhh
</div>


</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

liusslove

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动float：使用伪类实现，简单易操作

/*所有的子元素都浮动*/ .divall >*{ float: left; } /*伪类清除浮动*/.divall:after{ content: ‘.’;/*在.divall后添加元素*/ display: block;/*为块级元素*/ height: 0; clear: both;/*清除说有浮动*/ visibility: hi
复制链接

扫一扫