CSS float浮动详解

最新推荐文章于 2025-07-01 16:31:37 发布

木习习C

最新推荐文章于 2025-07-01 16:31:37 发布

阅读量870

点赞数

CC 4.0 BY-SA版权

文章标签：前端 css 浮动 css float

本文链接：https://blog.youkuaiyun.com/weixin_41459434/article/details/94600580

本文详细解析了CSS中float属性的工作原理，包括元素的定位方式、对文档流的影响及清除浮动的方法。通过具体示例展示了float如何使元素脱离正常文档流，并环绕文本，同时讨论了可能引发的高度塌陷问题及解决方案。

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

整理一些对于float的理解

一、float的定位方式

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

同样是脱离正常的文档流，float和absolute还是有区别的，float定位的元素允许文本和内联元素环绕它。
像下面这个例子:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="all">
        <div class="floatBlock">浮动区域</div>
        <p>123456789123456789123456789123456789123456789123456789123456789123456789</p>
    </div>
</body>
<style>
    .all {
        width: 300px;
        height: 300px;
        background-color: aquamarine;
        word-wrap: break-word;
    }

    .floatBlock {
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        float: left;
    }
</style>
</html>

二、float的影响

包裹性

float会让元素的display变成inline-block。

比如一个div未设置width时，默认宽度是100%。在设置了float后，宽度会变为起子元素撑开的宽度。
又比如一个span元素，在设置了float后，width、height等属性会开始对其生效。

破坏性

因为float脱离了正常的文档流，所以可能会引发高度塌陷。

三、清除浮动的方法

使用伪元素:after

.cl:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
}

在浮动元素的后一个元素上添加clear:both;或者在后面加一个空元素，再加上clear:both;
在浮动元素的父元素上加上overflow属性,原理主要是BFC。

可能遇到的问题

方法一和方法二其实是同理的，大多数情况也都是使用方法一，但特点情况下使用clear:both会出现一问题。
直接举例:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div class="div1">
        div1
    </div>
    <div class="div2">
        <div style="float:left">div2浮动文字</div>
        <div style="clear:both"></div>
    </div>
</body>
<style>
    *{
        padding: 0;
        margin:0;
    }
    .div1{
        float: left;
        width: 100px;
        height: 100px;
        background-color: #4CAF50;
    }
    .div2{
        margin-left:100px;
        background-color: aqua;
    }
</style>
</html>