利用伪类元素清除浮动

最新推荐文章于 2023-07-21 11:17:54 发布

晓凤凤

最新推荐文章于 2023-07-21 11:17:54 发布

阅读量676

点赞数

CC 4.0 BY-SA版权

分类专栏： css和html

本文链接：https://blog.youkuaiyun.com/weixin_41726565/article/details/82381281

css和html 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种常见的 CSS 技巧——清除浮动三步法，通过给浮动元素的父级元素添加伪类、设置 display 属性及 clear 属性来解决布局问题。

 <div class="container" >
           <ul type='circle'>
            <li>1</li>
            <li>2</li>
            <li>3</li>
           </ul> 
     </div>

 <style>
            *{
                padding: 0;
                margin: 0;
            }
            .container{
                border: 1px solid black;
            }
            .container::after{
                content:'';
                display: block;
                clear: both;
            }
            body{
                height:2000px;
            }
            ul li{
                float: left;
                width: 50px;
            }
        </style>