黑马程序员技术交流社区

标题: 【西安校区】如何清除css样式的浮动 [打印本页]

---

作者: 逆风TO    时间: 2019-10-30 14:33
标题: 【西安校区】如何清除css样式的浮动
清除css样式的浮动！
1）如何清除同级之间的浮动

Clear:both
Float:left/right
1
2
2）如何清除子级和父级之间的浮动

1.给父级添加高度

#ul1{
            border:1px solid #000;
            height:calc(100px * 4); 计算属性的
        }
        #ul1 li{
            width:100px;
            height:100px;
            border:1px solid #999999;
            float:left;
}
<ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
</ul>     

2.给父级加浮动

#ul1{
            border:1px solid #000;
            float:left;
        }
#ul1 li{
         width:100px;
         height:100px;
         border:1px solid #999999;
         float:left;
}
<ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
</ul>   

3.给父级添加 overflow:hideen

#ul1{
      border:1px solid #000;
      overflow:hidden;
        }
#ul1 li{
       width:100px;
       height:100px;
       border:1px solid #999999;
       float:left;
}
<ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
</ul>     

4.子级后加< br clear=“both”/>

#ul1{
            border:1px solid #000;
        }
#ul1 li{
            width:100px;
            height:100px;
            border:1px solid #999999;
            float:left;
}
<ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <br clear="both">
</ul>

5.在子级后添加一个div

#ul1{
            border:1px solid #000;
        }
#ul1 li{
            width:100px;
            height:100px;
            border:1px solid #999999;
            float:left;
        }
.clear{
            width:100px;
            clear: both;
}
<ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <div class='clear'></div>
</ul>

6.加伪类

#ul1{
            border:1px solid #000;
}
#ul1 li{
            width:100px;
            height:100px;
            border:1px solid #999999;
            float:left;
}
.clearfix:after{
            content:'';
            display:block;
            clear:both;
}
.clearfix{
            zoom:1;
}
<ul id="ul1" class='clearfix'>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
</ul>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2