CSS自学Day6-清除浮动

最新推荐文章于 2023-01-08 20:12:59 发布

什么时候养猫猫

最新推荐文章于 2023-01-08 20:12:59 发布

阅读量235

点赞数 1

分类专栏： CSS 文章标签：前端 css

本文链接：https://blog.csdn.net/m0_64005381/article/details/126817982

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

目标:能够认识清除浮动的目的，并且能够使用清除浮动的方法

1.1清除浮动的介绍

含义：清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级元素

原因：子元素浮动后脱标-->不占位置

目的：需要父元素有高度，从而不影响其他网页的布局

特点：

优点：1.简单粗暴，方便

2.缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

    <style>
        .top{
            margin: 0 auto;
            width: 1000px;
            height: 300px;
            background-color: pink;
            /* height: 100px; */

        }
        .left{
            width: 200px;
            height: 300px;
            background-color: #ccc;
            float: left;
        }

        .right{
            width: 790px;
            height: 300px;
            background-color: skyblue;
            float: right;
        }
    </style>
</head>
<body>
    <!--  父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，会显示到上面的影响-->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

2.1清除浮动的方法--额外外标签法

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

2.添加的块级元素设置 clear：both

特点：

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

    <style>
        .top{
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
    
        }
        .bottom{
            height: 100px;
            background-color: green;
        }
        .left{
            width: 200px;
            height: 300px;
            background-color: #ccc;
            float: left;
        }

        .right{
            width: 790px;
            height: 300px;
            background-color: skyblue;
            float: right;
        }
        .clearfix{
            /* 清除左右两侧浮动的影响 */
            clear:both;
        }
  
    </style>
</head>
<body>
    <!--  父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，会显示到上面的影响-->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>

2.3清除浮动的方法-单伪元素清除法

操作：用伪元素替代额外的标签

特点：

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

    <style>
        .top{
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
     
        }
        .bottom{
            height: 100px;
            background-color: green;
        }
        .left{
            width: 200px;
            height: 300px;
            background-color: #ccc;
            float: left;
        }

        .right{
            width: 790px;
            height: 300px;
            background-color: skyblue;
            float: right;
        }
        .clearfix::after{
            content: '';
            /* 伪元素添加标签是行内的，要求是块*/
            display: block;
            clear:both;



            /* 为了兼容性 */
            height: 0;
            visibility: hidden;
        }
  
    </style>
</head>
<body>
    <!--  父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，会显示到上面的影响-->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    <!-- 通过css 添加标签 -->
    </div>
    <div class="bottom"></div>
</body>

2.4清除浮动的方法-双伪元素清除法

操作：

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

特点：

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

2.不光能清除浮动，还能解决外边距塌陷

    <style>
        .top{
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
     
        }
        .bottom{
            height: 100px;
            background-color: green;
        }
        .left{
            width: 200px;
            height: 300px;
            background-color: #ccc;
            float: left;
        }

        .right{
            width: 790px;
            height: 300px;
            background-color: skyblue;
            float: right;
        }
        /* clear::before 作用：解决外边距塌陷问题 */
        /* 外边距塌陷：父子级标签，都是块级，子级加margin会影响父级的位置 */
       
        /* 清除浮动 */
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
        }
        
        /*真正清除浮动的标签 */
        .clearfix::after{
            clear: both;
        }
    </style>
</head>
<body>
    <!--  父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，会显示到上面的影响-->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

2.5清除浮动的方法-给父级元素设置overflow：hidden

操作：

1.直接给父级元素设置overflow：hidden

特点：

优点：方便

    <style>
        .top{
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
            overflow: hidden;
        }
        .bottom{
            height: 100px;
            background-color: green;
        }
        .left{
            width: 200px;
            height: 300px;
            background-color: #ccc;
            float: left;
        }

        .right{
            width: 790px;
            height: 300px;
            background-color: skyblue;
            float: right;
        }
  
    </style>
</head>
<body>
    <!--  父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，会显示到上面的影响-->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>