CSS之清除浮动

最新推荐文章于 2023-11-26 18:21:44 发布

喝牛奶的鱼1022

最新推荐文章于 2023-11-26 18:21:44 发布

阅读量392

点赞数

分类专栏： css 前端

本文链接：https://blog.csdn.net/betty13006159467/article/details/79963058

版权

前端同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

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

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清除浮动的方法

喝牛奶的鱼1022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之清除浮动

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

扫一扫