3.12CSS之为什莫要清除浮动

最新推荐文章于 2024-07-17 09:05:07 发布

小白蛋挞

最新推荐文章于 2024-07-17 09:05:07 发布

阅读量167

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_61547956/article/details/123454909

版权

比如一个线上商城，淘宝京东等，商品很多，不方便指定父盒子的高度，理想状态是，子盒子撑开父盒子，不给父盒子指定高度。

因为一行不可能只有一个商品，所以需要将标准流下的盒子放到一行。

方案一：将块级元素设置为行内块元素，但是之间会有缝隙，不知道几像素。

方案二：设置子盒子浮动，但是浮动后盒子不占有原来的位置，所以就不会撑开父盒子

所以我们要清除浮动。（红色线为父盒子，高度变为了0）

案例：大毛（黑色盒子）和二毛属于红色边框的子盒子，父盒子没有指定高度，在大毛二毛没有浮动之前，撑开了父盒子，但是我们想要大毛二毛在一行显示。结合上面方案二，我们要清除浮动。

1、额外标签法

清除浮动本质就是清除浮动带来的影响，即闭合浮动。

相当于在大盒子边上加了一个门。

优点：

通俗易懂，书写方便。

缺点：

增加了额外的标签，且必须是块级元素，不常用。

<style>
        .box {
            width: 800px;
            border: 1px solid red;
       margin: 0 auto
        }
        .damao {
            width: 200px;
            height: 200px;
            background-color: black;
            float: left;
        }
        .ermao {
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
            
        }

    .footer {
        height: 200px;background-color: pink;
    }
    .clear {
        clear: both;

    }
    </style>
</head>
<body>
   
    <div class="box">
        <div class="damao">大猫</div>
        <div class="ermao">二毛</div>
        <div class="clear"></div>
    </div>
   <div class="footer">清除了浮动，不占有box位置 </div>
</body>
</html>

2、父元素overflow

在父元素上加overflow:hidden

(在设置子元素的margin时，导致父元素塌陷的问题上，也用这个元素解决过，但是浮动的元素不会有这个问题)

3、after伪元素

    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            /* IE6、7专属 */
            *zoom: 1;
        }
        .box {
            width: 800px;
            border: 1px solid red;
       
        }
        .damao {
            width: 200px;
            height: 200px;
            background-color: black;
            float: left;
        }
        .ermao {
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
    .footer {
        height: 200px;background-color: pink;
    }
    </style>
</head>
<body>
  
    <div class="box clearfix">
        <div class="damao">大猫</div>
        <div class="ermao">二毛</div>
        
    </div>
   <div class="footer">额外标签的升级版，也是给父元素添加 </div>
</body>
</html>

4、双伪元素

    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
        .box {
            width: 800px;
            border: 1px solid red;
       
        }
        .damao {
            width: 200px;
            height: 200px;
            background-color: black;
            float: left;
        }
        .ermao {
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
    .footer {
        height: 200px;background-color: pink;
    }
    </style>
</head>
<body>
    <!-- 也是给父元素添加 -->
    <div class="box clearfix">
        <div class="damao">大猫</div>
        <div class="ermao">二毛</div>
        
    </div>
   <div class="footer"> </div>
</body>