清除浮动的几种技巧

1、父级div定义height

<style type="text/css">
            .box{
                background-color:greenyellow;
                border: 1px solid red;
            }
            .left{
                float: left;
                width: 20%;
                height: 200px;
                background: #ddd;
            }
            .right{
                float: right;
                width: 30%;
                height: 80px;
                background: #ddd;
            }
        </style>
    </head>
    <body>
        
        <div class="div1">
            <div class="left">
                左div
            </div>
            <div class="right">
                右div
            </div>
        </div>
        
    </body>
View Code

原理：手动定义height，就解决了父级div无法自动获取高度的问题

 

2、结尾处加空div标签clear：both

        <style type="text/css">
            .box{
                background-color:greenyellow;
                border: 1px solid red;
            }
            .left{
                float: left;
                width: 20%;
                height: 200px;
                background: #ddd;
            }
            .right{
                float: right;
                width: 30%;
                height: 80px;
                background: #ddd;
            }
            .clearfix{
                clear: both;
            }
        </style>
    </head>
    <body>
        
        <div class="div1">
            <div class="left">
                左div
            </div>
            <div class="right">
                右div
            </div>
            <div class="clearfix">
                
            </div>
        </div>
        
    </body>
View Code

原理：添加一个空div，利用css提高的clear：both清除浮动，让父级div能自动获取到高度

 

3、父级定义伪类：after

        .box{
                background-color:greenyellow;
                border: 1px solid red;
            }
            .left{
                float: left;
                width: 20%;
                height: 200px;
                background: #ddd;
            }
            .right{
                float: right;
                width: 30%;
                height: 80px;
                background: #ddd;
            }
            .box:after{
                display: block;
                clear: both;
                content: "";
                height: 0;
            }
        </style>
    </head>
    <body>
        
        <div class="box">
            <div class="left">
                左div
            </div>
            <div class="right">
                右div
            </div>
        </div>
        
    </body>
View Code

原理：和方法2类似

 

4、父级div定义overflow：hidden/auto

<style type="text/css">
            .box{
                background-color:greenyellow;
                border: 1px solid red;
                overflow: hidden;
            }
            .left{
                float: left;
                width: 20%;
                height: 200px;
                background: #ddd;
            }
            .right{
                float: right;
                width: 30%;
                height: 80px;
                background: #ddd;
            }
        </style>
    </head>
    <body>
        
        <div class="box">
            <div class="left">
                左div
            </div>
            <div class="right">
                右div
            </div>
        </div>
        
    </body>
View Code

原理：使用overflow：hidden/auto时，浏览器会自动检查浮动区域的

 

ps:

　　推荐使用伪类的方法清除浮动，浏览器支持好，许多主流网站都是这种方法。

posted on 2017-02-17 16:49  皇室后裔  阅读(118)  评论(0)    收藏  举报