CSS之清除浮动

原创 2018年04月16日 16:59:29

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


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;居中
不推荐使用

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

CSS四种清除浮动的方法

浮动能让元素脱标,但是不同区域的标签之间却又会贴边,比如: Document ...
  • Jeff169
  • Jeff169
  • 2016-12-07 16:33:48
  • 686

浅谈CSS清除浮动

1、为什么会出现浮动? 浮动的产生的最根本的原因是为了实现文字环绕效果。 2、什么时候需要清除浮动? 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,而高度的塌陷使页面后面的布局...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-03-02 15:47:04
  • 307

Html+CSS CSS(CSS3) 3种清除浮动的方法

应用DivCSS网页布局,经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。 下面看今天的...
  • u010003835
  • u010003835
  • 2016-03-22 16:39:43
  • 1584

css清除浮动float的七种常用方法总结和兼容性处理

7、万能清除法 **after伪类** 清浮动(现在**主流**方法,**推荐使用**) ``` 选择符:after{ content:"."; clear:both; ...
  • promiseCao
  • promiseCao
  • 2016-10-09 23:04:14
  • 20196

CSS清除浮动原理(涉及BFC)和方法

为什么要清除浮动??首先理解浮动框:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。 浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通...
  • jlin991
  • jlin991
  • 2017-03-03 21:36:44
  • 902

CSS清除浮动的五种方式

浮动元素会影响整体的布局,但是有些情况又不得不让元素浮动来更好的构成页面,下面整理五种常用的清楚浮动的方法: (注:为了节省时间,将方法写在了class名内,看懂即可) 1,为父元素添加高度: ...
  • Manson_zh
  • Manson_zh
  • 2017-07-04 15:33:07
  • 570

CSS—清除浮动的几种方式

什么是浮动? 特性:1--浮动的元素不会占据标准流的空间,但是会影响标准流中的文本的排版。浮动只有左右浮动。 2--浮动元素A的位置与上一个元素有关系。如果上一个元素有浮动,则A的顶...
  • nongweiyilady
  • nongweiyilady
  • 2016-12-26 17:11:29
  • 2872

清除浮动最有效的css写法

说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很...
  • u012396955
  • u012396955
  • 2017-03-04 20:15:14
  • 1693

css 伪元素 伪类 使用 万能清除浮动 ..

参考 http://blog.jobbole.com/49173/ css 伪元素即插入的虚伪元素 像:before :after 插入元素 css 伪类 就是 操作class 样式 ...
  • java_goodstudy
  • java_goodstudy
  • 2016-12-20 03:24:33
  • 5313

CSS清除浮动的几种方法

浮动的几个重要性质首先,浮动有几个很重要的性质 脱标:脱离标准文档流 贴边(浮动会紧贴着浮动方向的边 字围(浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动...
  • u011342403
  • u011342403
  • 2017-04-24 06:49:22
  • 901
收藏助手
不良信息举报
您举报文章:CSS之清除浮动
举报原因:
原因补充:

(最多只允许输入30个字)