css浮动问题及清除浮动

最新推荐文章于 2024-07-18 22:26:13 发布

编程小鱼

最新推荐文章于 2024-07-18 22:26:13 发布

阅读量479

点赞数

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

本文链接：https://blog.csdn.net/m0_46485428/article/details/118719139

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

浮动

浮动模型:不同于标准流,元素挨着元素进行排列;
浮动的元素都脱离了标准文档流,不再占有原来的位置。
浮动出现的初衷是为了解决文字环绕的效果(内容让出浮动部分,但是元素没有让出)
属性float可以设置元素的浮动效果,浮动效果有

left：左浮动
right：右浮动
none：默认的不浮动标准流

浮动元素的特征

浮动可以使元素从左到右紧密排列;
浮动的元素具有块级元素的特点(可以设置宽高, margin、 padding生效,但是没有换行符)
浮动后的元素不存在上下外边距合并问题
浮动的元素脱离了文档流,不再占有原来的位置
一个元素设置浮动后,其它同级的元素都要设置为浮动
元素设置浮动后,原有的自适应占父元素的百分百宽度变为包裹内容的宽度;
元素设置浮动后,会影响后面元素的布局,所以设置浮动后一定要及时清除
清除浮动的属性 clear: left、right、both(常用);

浮动的元素塌陷问题

在父元素不设置宽/高的情况下,嵌套的子元素如果都设置了浮动,会呈现出父元素塌陷的效果。例如：

<!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>
        .container{
            margin: 10px auto;
            width: 800px;
            background-color: green;
        }
        /* 元素浮动 */
        .container div{
            width: 100px;
            height: 100px;
            float: left;
        }
        .box1{
            background: pink;
        }
        .box2{
            background: yellow;
        }
        .box3{
            background: blue;
        }
        .box4{
            background: rgb(223, 163, 84);
        }
        .box5{
            background: red;
        }
        .box6{
            background: skyblue;
        }
        .outer{
            height: 200px;
            background: purple;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
    </div>
    <div class="outer">
        外面的元素
    </div>
</body>
</html>

未设置浮动前：
在这里插入图片描述
设置浮动后

清除浮动（比较推荐最后一种）

1.给父元素设置高度：这种方式在确定宽高的情况下,可以使用;但很多时候,容器都是由内容撑起来,所以根据内容的多少,不太好控制这个高度(改动较大)

.container{
     margin: 10px auto;
     width: 800px;
     background-color: green;
     /* 第一种方案 给父元素设置高度 */
     height: 200px;
}

2.外墙法：在父元素的后面,设置父元素的一个同级空元素(dⅳ),设置清除浮动;这种方式需要添加过多的空元素,增加结构代码量;并且我们完全可以在后面那个同级父元素上直接清除浮动。父元素背景颜色看不到。
在这里插入图片描述

3.内墙法：在父元素内部后面,添加一个空的子元素(div),设置清除浮动;问题同外墙法类似,但是解决了外墙法不能解决的父元素塌陷问题;相对于给父元素设置高度的不确定性,这种方式直接内容撑起父元素的高度
在这里插入图片描述

4.父元素设置为浮动,后面元素清除浮动，但是会触发更多的问题

5.父元素设置为行内块元素: display: inline-block;达不到想要的布局效果

6.父元素设置 overflow属性：属性值可以是hidden、auto、 scroll; overflow属性本身是用来解决内容溢出元素的处理方式, hidden代表溢出隐藏，auto溢出自适应(内容没有溢出时无滚动条,溢出后有滚动条)，scroll内容不管是否溢出,都会出现滚动条。默认的 visible溢出可视,不能解决父元素塌陷问题。这种方式,在需要内容溢出盒子显示时,可能会影响内容的显示效果。
在这里插入图片描述

在这里插入图片描述
7.通过伪元素清除浮动：将伪元素插入到容器元素的最后面,代替内墙法中插入的元素,并用伪元素清除浮动。

8.clearfix类：工作中,常常将清除浮动的功能封装在一个 clearfix类中,这样为容器元素设置该类,就可以清除浮动,这种方式可以复用,因此工作中很常用（推荐），例如下面这个例子

<!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>
        .list1{
            background: green;
            width: 800px;
        }
        .list2{
            background: gold;
            width: 800px;
        }
        .box1,
        .box2,
        .box3{
            width: 100px;
            height: 100px;
            float: left;
        }
        .box1{
            background: yellowgreen;
        }
        .box2{
            background: skyblue;
        }
        .box3{
            background: rgb(115, 35, 180);
        }
        .box4{
            height: 50px;
            background: pink;
        }
        .clearfix::after{
            /* 内容 */
            content: "";
            /* 块元素 */
            display: block;
            /* 清除浮动 */
            clear: both;
        }
    </style>
</head>
<body>
    <div class="list1 clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <div class="box4"></div>
    <div class="list2 clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <div class="box4"></div>
</body>
</html>