浮动布局详解与解决方案-CSDN博客

本文介绍了浮动(float)在HTML和CSS中的基本用法，包括浮动与display的区别、文档流概念、浮动的定义及其表现。讨论了浮动导致的父级高度塌陷问题，提出了解决方案——通过给父级元素添加overflow:hidden样式来触发BFC。此外，还涉及了清除浮动的方法，如使用伪类:before和:after。

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

浮动

float:left;

float:right;

和display的区别：

1、没有空格解析；

2、display的行内是以基线对齐的，使用margin-top会出现行内所有元素全部下移；

3、浮动没有基线问题；

4、display不能控制方向；

文档流

未设置浮动float，普通的html页面就是文档流，也叫做标准流

浮动的定义：

1、设置浮动的元素，遇到父级或者是相邻的浮动元素，会让浮动元素停止在原来位置不变；

2、如果上一个元素是标准流元素，那么这个浮动元素的相对垂直位置不变；

3、相邻的浮动元素会并排在一行（除非上一个元素是标准流元素）；

浮动的表现：

1、控制方向；

2、父级宽度不够，元素会被挤到下一行；

3、浮动会将元素改变为块元素类型；

使用浮动会造成父级的高度塌陷（浮动使得无法撑开父级容器的高度）

解决方法：给父级元素添加 overflow:hidden 样式;

使用的是bfc触发机制，给父级元素添加了一个单独隔离的虚拟容器，肉眼看不见，但是浏览器能够感知到，虚拟容器可以感知到浮动的子级元素并使用子级元素撑开父级元素；

清除浮动：

clear:left;

clear:right;

clear:both;

清除左浮动、右浮动和两侧浮动；

左浮动（left）：设置该属性的元素自己本身无法使用左浮动；

右浮动（right）：设置该属性的元素自己本身无法使用右浮动；

两侧浮动（both）：设置该属性的元素自己本身无法使用左、右浮动；

伪类

:before{} 和 :after{}

<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>
        .wrap{
            width: 200px;
            height: 200px;
            border: 1px solid green;
        }
        .wrap:before{
            /*需要content激活*/
            content: "hello";
        }
        .wrap:after{
            /*需要content激活*/
            content: "world";
            /* display: block; */
        }
    </style>
</head>
<body>
    <div class="wrap">111</div>
</body>

浮动出现卡位情况：

<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>
        .wrap{
            width: 250px;
            height: 200px;
            border: 1px solid green;
        }
        p{
            margin: 0;
            width: 80px;
            height: 80px;
            border: 1px solid blue;
            float: left;
        }
        .box1{
            width: 81px;
            height: 81px;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <p>1</p>
        
        <p class="box1">2</p>
        <p>3</p>
        <p>3</p>
    </div>
</body>