浮动float:使用伪类实现,简单易操作

来源:互联网 发布:制作软件 编辑:程序博客网 时间:2024/05/22 16:00
元素需要浮动时,如果每个标签元素都浮动或者取消浮动会比较凌乱,如果使用伪类
<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>
0 0