美文网首页
清除浮动

清除浮动

作者: xing222333 | 来源:发表于2019-03-22 21:34 被阅读0次

    方法1:在浮动元素后面增加空白元素用上clear:both

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>清除浮动</title>
        <style>
            .box {
                background-color: #2AB561;
                border: 1px solid red;
            }
    
            .one {
                width: 100px;
                height: 50px;
                background-color: #0DA5D6;
                float: left;
            }
    
            .two {
                float: left;
                width: 100px;
                height: 50px;
                background-color: #1b6d85;
            }
    
            .three {
                width: 200px;
                height: 100px;
                background-color: #0f0f0f;
            }
            .four{
                clear: both;
            }
    
        </style>
    </head>
    <body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="four"></div>
    </div>
    <div class="three"></div>
    </body>
    </html>
    

    方法2:父级添加overflow:hidden

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>清除浮动</title>
        <style>
            .box {
                background-color: #2AB561;
                border: 1px solid red;
                /*overflow触发BFC,BFC可以清除浮动*/
                overflow: hidden; 
            }
    
            .one {
                width: 100px;
                height: 50px;
                background-color: #0DA5D6;
                float: left;
            }
    
            .two {
                float: left;
                width: 100px;
                height: 50px;
                background-color: #1b6d85;
            }
    
            .three {
                width: 200px;
                height: 100px;
                background-color: #0f0f0f;
            }
    
    
        </style>
    </head>
    <body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
    </div>
    <div class="three"></div>
    </body>
    </html>
    

    方法3:添加伪元素

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>清除浮动</title>
        <style>
            .box {
                background-color: #2AB561;
                border: 1px solid red;
            }
    
            .one {
                width: 100px;
                height: 50px;
                background-color: #0DA5D6;
                float: left;
            }
    
            .two {
                float: left;
                width: 100px;
                height: 50px;
                background-color: #1b6d85;
            }
    
            .three {
                width: 200px;
                height: 100px;
                background-color: #0f0f0f;
            }
    
            .clearFloat:after {
                /*避免有空隙*/
                content: '.';
                /*变成块级元素*/
                display: block;
                /*隐藏content*/
                visibility: hidden;
                clear: both;
                /*清除盒子高度*/
                height: 0;
    
            }
    
            .clearFloat {
                /*兼容IE6,7*/
                *zoom: 1;
            }
    
    
        </style>
    </head>
    <body>
    <div class="box clearFloat">
        <div class="one"></div>
        <div class="two"></div>
    </div>
    <div class="three"></div>
    </body>
    </html>
    

    方法4:双伪元素清除浮动

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>清除浮动</title>
        <style>
            .box {
                background-color: #2AB561;
                border: 1px solid red;
            }
    
            .one {
                width: 100px;
                height: 50px;
                background-color: #0DA5D6;
                float: left;
            }
    
            .two {
                float: left;
                width: 100px;
                height: 50px;
                background-color: #1b6d85;
            }
    
            .three {
                width: 200px;
                height: 100px;
                background-color: #0f0f0f;
            }
    
            .clearFloat:before ,.clearFloat:after {
                /*避免有空隙*/
                content: '';
                /*变成块级元素*/
                display: table;
            }
            .clearFloat:after{
                clear: both;
            }
    
            .clearFloat {
                /*兼容IE6,7*/
                *zoom: 1;
            }
    
    
        </style>
    </head>
    <body>
    <div class="box clearFloat">
        <div class="one"></div>
        <div class="two"></div>
    </div>
    <div class="three"></div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:清除浮动

          本文链接:https://www.haomeiwen.com/subject/dokdvqtx.html