css:浮动定位（float）以及清除浮动

牛奶面包吖

已于 2023-04-10 13:54:52 修改

阅读量945

点赞数

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

于 2022-10-11 08:38:13 首次发布

本文链接：https://blog.youkuaiyun.com/qq_50487248/article/details/127229668

版权

css 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了CSS中的浮动定位，包括浮动特点、浮动属性、浮动实例、父元素塌陷问题以及如何清除浮动以解决父元素高度塌陷。重点讲解了如何通过设置`float`属性实现左右浮动，并探讨了不同清除浮动的方法，如设置高度、使用`overflow`、添加空元素以及利用`:after`伪元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.浮动定位的特点：

脱离文档流、不占据位置，不受默认排列方式的控制（左到右、上到下）
不论怎么浮动，依旧在盒子里
元素会停靠在父元素的左边或右边，或者停靠在已经浮动元素的左边或者右边
块级元素浮动之后，宽度自适应不再是100%
行内元素浮动之后，会变为块级元素

2.浮动属性

float：none：默认，没有设置浮动定位
float：left：左浮动
float：right：右浮动

3.简单例子

<body>
    <div class="mydiv">
        <div class="d1">第一个</div></div>
        <div class="d2">第二个</div>
        <div class="d3">第三个</div>
        <div class="d4">第四个</div>
        <div class="d5">第五个</div>
    </div>
</body>

没有设置前的效果：
在这里插入图片描述
分别给四个盒子设置做浮动之后：

   .d1,.d2,.d3,.d4,.d5{
        width: 100px;
        height: 100px;
        float: left;
    }
    .d1{
        background-color:blue;
    }
    .d2{
        background-color:pink;
    }
    .d3{
        background-color:green;
    }
    .d4{
        background-color:purple;
    }
    .d5{
        background-color:red;
    }
    
    
</style>
<body>
    <div id="mydiv">
        <div class="d1">第一个</div></div>
        <div class="d2">第二个</div>
        <div class="d3">第三个</div>
        <div class="d4">第四个</div>
        <div class="d5">第五个</div>
    </div>
</body>

效果图：
在这里插入图片描述

4.父元素塌陷

因为浮动定位是脱离文档流的，不占据位置，如果一个元素的子元素设置了浮动，且该元素没有设置高度，那么该元素也就是父元素的高度就会变成0，这就是父元素高度塌陷。
比如上述例子中的mydiv盒子，我们加上边框之后就能清楚地看到效果：
在这里插入图片描述

那么在这种情况下，我们就需要清除浮动。

5.清除浮动（解决父元素塌陷）

给父元素设置高度（会固定高度，一般不建议使用）

	<style>
       #d{
              /*1.给父元素设置高度 height*/
            height: 300px;
        }
        #d1{
        width: 80px;
         height: 80px;
         float: left;
         background-color: red;
       }
        #d2{
            float:left;
            width: 100px;
            height:80px;
            background-color: green;
        }
        #d3{
            float:left;
            width: 120px;
            height:80px;
            background-color: blue;
        }

        
    </style>
<body>
<div class="clearDiv" id="d">
    <div id="d1">这是div1</div>
    <div id="d2">这是div2</div>
    <div id="d3">这是div3</div>
</div>
</body>

给父元素设置一个overflow（需要溢出的部分也会被隐藏，不推荐使用）

	<style>
       #d{
              /*3.给父元素设置一个overflow*/
            overflow: hidden;    /*溢出隐藏*/

        }
        #d1{
        width: 80px;
         height: 80px;
         float: left;
         background-color: red;
       }
        #d2{
            float:left;
            width: 100px;
            height:80px;
            background-color: green;
        }
        #d3{
            float:left;
            width: 120px;
            height:80px;
            background-color: blue;
        }

    </style>
<body>
<div class="clearDiv" id="d">
    <div id="d1">这是div1</div>
    <div id="d2">这是div2</div>
    <div id="d3">这是div3</div>
</div>
</body>

给父元素添加一个最小的儿子（添加一个空的块级元素）给这个儿子设置clear:both （添加无意义的语义，不利于后期维护，不推荐）

 	<style>
       /*3.给父元素添加一个最小的儿子，给这个儿子添加clear：both;*/
        .clear{
          clear: both;
       } 
       #d1{
        width: 80px;
         height: 80px;
         float: left;
         background-color: red;
       }
        #d2{
            float:left;
            width: 100px;
            height:80px;
            background-color: green;
        }
        #d3{
            float:left;
            width: 120px;
            height:80px;
            background-color: blue;
        }

    </style>
<body>
<div class="clearDiv" id="d">
    <div id="d1">这是div1</div>
    <div id="d2">这是div2</div>
    <div id="d3">这是div3</div>
   <div class="clear"></div>
</div>
</body>

给父元素使用CSS的:after伪元素（推荐使用）

	<style>
        /* 4.给父元素设置after 给after设置clear:both */
       .clearDiv:after{
            content:'' ;
            display: block;
            clear: both;
            }
            #d1{
        width: 80px;
         height: 80px;
         float: left;
         background-color: red;
       }
        #d2{
            float:left;
            width: 100px;
            height:80px;
            background-color: green;
        }
        #d3{
            float:left;
            width: 120px;
            height:80px;
            background-color: blue;
        }

    </style>
<body>
<div class="clearDiv" id="d">
    <div id="d1">这是div1</div>
    <div id="d2">这是div2</div>
    <div id="d3">这是div3</div>
</div>
</body>