您现在的位置:首页 >> 前端 >> 内容

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

时间:2017/3/9 9:13:00 点击:

  核心提示:浮动float:使用伪类实现,简单易操作,元素需要浮动时,如果每个标签元素都浮动或者取消浮动会比较凌乱,如果使用伪类。/*所有的子元素都浮动*/ .pall >*{float: left; }/*伪类...
浮动float:使用伪类实现,简单易操作,元素需要浮动时,如果每个标签元素都浮动或者取消浮动会比较凌乱,如果使用伪类。


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

 

方法二:



<html>
<body>
<style>
    /*所有的子元素都浮动*/
 .pall >*{
    float: left;
 }
 
</style>
 
<p class="pall">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</p>
<p></p>
<p>
    hhhhhhh
</p>
 
 
</body>
</html>

 


Tags:浮动 动F FL LO 
作者:网络 来源:liusslove的