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

牛奶面包吖

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

阅读量785

点赞数

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

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

本文链接：https://blog.csdn.net/qq_50487248/article/details/127229668

版权

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">第二个