首页 > 其他 > 详细

清除浮动

时间:2020-07-29 10:26:23      阅读:75      评论:0      收藏:0      [点我收藏+]

根据BFC第四条规则:
计算BFC的高度时,浮动元素也参与计算。(清楚浮动hasayout)
清除浮动目的:让浮动的子元素库能够撑开父级的高度。

如图内部盒子浮动后,外部盒子无高
技术分享图片

解决方法:

一、外层直接添加高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>清除浮动</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            .wrap{
                border:2px solid red;
                height: 300px;
                
            }
            .inner{
                width:300px;
                height: 300px;
                background: green;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="inner"></div>
        </div>
    </body>
</html>

二、开启BFC:根据BFC布局规则,开启了BFC浮动高度有效

.wrap{
                border:2px solid red;
          /*开启BFC*/ overflow:hidden; /*position:absolute;*/ /*display: inline-block;*/
          zoom:1;/*开启hasyout,兼容ie6,7*/ }

三、<br/>标签:利用其clear属性

<div class="wrap">
            <div class="inner"></div>
            <br clear="all" />
        </div>

四、空标签

<div class="wrap">
            <div class="inner"></div>
            <div style="clear: both;"></div>
        </div>

五、伪元素

    <style>
            *{
                margin:0;
                padding:0;
            }
            .wrap{
                border:2px solid red;     
            }
            .inner{
                width:300px;
                height: 300px;
                background: green;
                float:left;
            }
            /*开启hasyout*/
            .clearfix{
                *zoom:1;
            }
            /*ie6,7不支持伪元素*/
            .clearfix:after{
                content: "";
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="wrap clearfix">
            <div class="inner"></div>
        </div>
    </body>

总结:几种方法对比

1、给父级加高度,扩展性不好

2、开启BFC  overflow:hidden 定位 浮动,ie6,7底下不支持BFC

3、br标签:ie6不支持,违反了结构、样式、行为相分离的原则

4、空标签:违反了结构、样式、行为相分离的原则,ie6下元素的最小高度为19px;可以尝试给元素的font-size:0,但仍存在2px;

5、伪元素+开启haslayout,因为ie6,7下不支持伪元素,所以还要开启BFC;

 

清除浮动

原文:https://www.cnblogs.com/LiuQyu/p/13394792.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!