CSS之清除浮动

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/betty13006159467/article/details/79963058

浮动会使元素逃离文档流,按照指定方向 发生移动,遇到父级边界或相邻的浮动元素停下来。
高度塌陷问题:在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。
由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。
下面是解决浮动的几种方法,以供我自己学习:


1、添加空div标签(clear:both;)
在浮动元素结尾处添加一个空的div标签,利用css提供的clear:both清除浮动,让父级div能自动获取到高度。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" type="text/html; charset=utf-8" >
        <style type="text/css">
            #main{
                border:1px solid red;
            }
            #left{
                float:left;
                width:30%;
                height:300px;
                background:red;
            }
             #right{
                float:right;
                width:70%;
                height:200px;
                background:green;
           }
           /*利用clear:both清除浮动*/
            #clearfloat{
                clear:both;
            }
            #footer{
                height:50px;
                background:#ccc;
                margin-top:10px;
                border:1px solid red;
            }
        </style>
        <title>清除浮动</title>
    </head>
    <body>
        <div id="main">
            <div id="left">left我是左边</div>
            <div id="right">right我是右边</div>
            <div id="clearfloat"></div> <!--添加一个空的div-->
        </div>
        <div id="footer">footer</div>
    </body>
</html>

缺点:若页面浮动较多,会增加很多空div。
不推荐使用,此方法是以前主要使用的一种方法。


2、给父级div设置高度

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" type="text/html; charset=utf-8" >
        <style type="text/css">
            #main{
                border:1px solid red;
                height:300px;/*父级div设置高度*/
            }
            #left{
                float:left;
                width:30%;
                height:300px;
                background:red;
            }
             #right{
                float:right;
                width:70%;
                height:200px;
                background:green;
           }

            #footer{
                height:50px;
                background:#ccc;
                margin-top:10px;
                border:1px solid red;
            }
        </style>
        <title>清除浮动</title>
    </head>
    <body>
        <div id="main">
            <div id="left">left我是左边</div>
            <div id="right">right我是右边</div> 
        </div>
        <div id="footer">footer</div>
    </body>
</html>

给父级div手动设置高度,解决了父级无法自动获取高度的问题。
缺点:只适合高度固定的布局,若父级高度与浮动元素最大高度不一致时,会产生问题。
不推荐使用,只建议高度固定的布局使用。


3、父级div定义overflow:hidden;或overflow:auto;

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" type="text/html; charset=utf-8" >
        <style type="text/css">
            #main{
                border:1px solid red;
                overflow:hidden;/*父级元素定义overflow*/
                /*overflow:auto;*/
                zoom:1;/*为了兼容IE6,7*/
            }
            #left{
                float:left;
                width:30%;
                height:300px;
                background:red;
            }
             #right{
                float:right;
                width:70%;
                height:200px;
                background:green;
           }

            #footer{
                height:50px;
                background:#ccc;
                margin-top:10px;
                border:1px solid red;
            }
        </style>
        <title>清除浮动</title>
    </head>
    <body>
        <div id="main">
            <div id="left">left我是左边</div>
            <div id="right">right我是右边</div> 
        </div>
        <div id="footer">footer</div>
    </body>
</html>

使用此方法必须定义width或者zoom:1,同时不能定义height,浏览器会自动检查浮动区域的高度。
缺点:overflow:hidden;不能和position配合使用,因为超出的尺寸会被隐藏;
overflow:auto;内部宽高超过父级div时会出现滚动条。


4、br清浮动
在浮动结尾加入标签br,父级div要定义zoom:1解决IE浮动问题。

<div id="main">
            <div id="left">left我是左边</div>
            <div id="right">right我是右边</div>
            <br clear="both"></div> <!--在这里定义一个br-->
</div>

不推荐使用,了解即可。


5、父级div定义伪类after和zoom

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" type="text/html; charset=utf-8" >
        <style type="text/css">
            .main{
                border:1px solid red;

            }
            #left{
                float:left;
                width:30%;
                height:400px;
                background:red;
            }
             #right{
                float:right;
                width:70%;
                height:300px;
                background:green;
           }
            .clearfloat:after{/*定义伪类after*/
                display:block;
                clear:both;
                content:"";
                visibility:hidden;
                height:0;
            }
            .clearfloat{/*定义zoom,解决IE兼容性问题*/
                zoom:1;
            }
            #footer{
                height:50px;
                background:#ccc;
                margin-top:10px;
                border:1px solid red;
            }
        </style>
        <title>清除浮动</title>
    </head>
    <body>
        <div class="main clearfloat">
            <div id="left">left我是左边</div>
            <div id="right">right我是右边</div>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

IE8以上和非IE浏览器才支持:after,zoom(IE专有属性)可解决IE6,7浮动问题
优点:浏览器支持好,不易出现怪问题,目前众多大型网站使用
推荐使用,建议定义公共类,以减少css代码。


6、父级同时浮动(以浮制浮)
原理:所有代码一起浮动,就变成一个整体。
缺点:会产生新的浮动问题。
不建议使用,了解即可。


7、父级div设置display属性
dispaly:table;
将div变成表格,会产生新的未知问题,不推荐使用,了解即可。
display:inline-block;
会使父级的margin左右auto失效,无法使用margin:0 auto;居中
不推荐使用

总结:文中的3,6,7都是利用BFC清除浮动的方法

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页