H5 CSS基础二实战:清除浮动、div自适应

一、根据上篇博客,首先,我们清除浮动、以下为固定格式、也是最普遍写法:

.clearfix:after,
            .clearfix:before {
                display: table;
                content: ""
            }

            .clearfix:after {
                clear: both;
                overflow: hidden
            }

二、写个Div、内部放一些li

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 三、为方便观看,我们给Div弄个边框

    .demo {
                    width: 250px;
                    border: 1px solid #ccc;
                    padding: 10px;
                    margin: 20px auto
                }
    margin: 20px auto //水平居中、距离顶部20px

    四、li设置浮动吧

    li {
                    list-style: none outside none;
                    float: left;
                    height: 20px;
                    line-height: 20px;
                    width: 20px;
                    border-radius: 10px;
                    text-align: center;
                    background: #FAFAD2;
                    color: green;
                    margin-right: 5px;
                }
    list-style: none outside none;//设置li的样式,去掉黑点,否则:
    li {
                    /*list-style: none outside none;*/
                    float: left;
                    height: 20px;
                    line-height: 20px;
                    width: 40px;
                    border-radius: 10px;
                    text-align: center;
                    background: #FAFAD2;
                    color: green;
                    margin-right: 5px;
                }

    这时候我们注释掉这个代码:

    .clearfix:after,
                .clearfix:before {
                    display: table;
                    content: ""
                }
    
                .clearfix:after {
                    clear: both;
                    overflow: hidden
                }

    如图:

    现在,大家应该明白 这个清除浮动了

    CSDN博客稿源:CSDN博客 (源链) | 关于 | 阅读提示

    本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
    酷辣虫 » 综合技术 » H5 CSS基础二实战:清除浮动、div自适应

    喜欢 (0)or分享给?

    专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

    使用声明 | 英豪名录

    登录

    忘记密码 ?

    切换登录

    注册