CSS浮动清除浮动（5种）用时直接复制超方便

不吃蒜苔

已于 2022-08-11 23:57:49 修改

阅读量310

点赞数

文章标签： css 前端 html

于 2022-08-11 23:51:07 首次发布

本文链接：https://blog.csdn.net/m0_66733043/article/details/126294911

版权

清除浮动的介绍

含义：清除浮动（标签）给别的（标签）带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：子元素浮动后脱标→不占位置
目的：需要父元素有高度，从而不影响其他网页元素的布局

先看代码：未去掉父盒子top高度之前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            margin:0 auto;

            width: 1000px;
            height: 200px;
            background-color: lightblue;
        }

        .left{
            float: left;

            width: 100px;
            height:200px;
            background-color: blanchedalmond;
        }
        .right{
            float: right;

            width: 890px;
            height: 200px;
            background-color:bisque;
        }
        .bottom{
            height: 100px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    
    <div class="bottom"></div>
</body>
</html>

去掉父盒子top高度之后

受浮动影响的情况产生了！！！

父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置。

清除浮动的方法

①直接设置父元素高度

特点：
优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度。如:新闻列表

②额外标签法

操作：
1，在父元素内容的最后添加一个块级元素

2，给添加的块级元素设置clear:both

特点：
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

<div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 加上一个类 -->
        <div class="clearfix"></div>
</div>

.clearfix{
           // 清除左右两侧的浮动影响
            clear: both;
        }

③单伪元素清除法

<div class="top clearfix" >
        <div class="left"></div>
        <div class="right"></div>
                                    <!-- 加上一个类 -->
                                    <!-- <div class="clearfix"></div> -->
        <!-- 这次用用css -->
    </div>
    
    <div class="bottom"></div>

 /*单伪元素清除浮动和额外标签法原理是一样的*/
       .clearfix ::after{
            content:'';
            /*伪元素添加的标签是行内，要求块*/
            display: block;
            clear: both;

            /* 为了兼容性 */
            
            height: e;
            visibility: hidden;
        }

④双伪元素清除法

特点：
优点：项目中使用，直接给标签加类即可清除浮动。

 /*.clearfix ::before  作用:解决外边距塌陷问题
            外边距塌陷:父子标签，都是块级，子级加margin会影响父级的位置*/
        /*清除浮动*/
        .clearfix::before,
        .clearfix ::after {
            content: '';
            display: table;
        }
        /*真正清除浮动的标签*/
        .clearfix ::after {
            content: '';
            display: table;
            clear: both;
        }

⑤ 给父元素设置overflow : hidden

操作：
直接给父元素设置overflow : hidden
优点：

方便

.top{
            margin:0 auto;

            width: 1000px;
            /* height: 200px; */
            background-color: lightblue;
            overflow: hidden;/*最简单！！！！！！*/
     }

第五种推荐

不吃蒜苔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS浮动清除浮动（5种）用时直接复制超方便

含义：清除浮动（标签）给别的（标签）带来的影响影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素原因：子元素浮动后脱标→不占位置目的：需要父元素有高度，从而不影响其他网页元素的布局...
复制链接

扫一扫