CSS-float_css float 填充-CSDN博客

本文链接：https://blog.csdn.net/GeXueliu/article/details/124064010

本文详细介绍了CSS中浮动(float)属性的特点，包括脱离文档流、不影响后续元素定位但可能导致父容器高度坍塌，以及浮动元素的块级化但不自动填充margin。通过代码示例展示了这些特性的应用，同时提到了浮动元素导致的父容器高度坍塌问题及其解决方案。此外，还探讨了多个浮动元素在同一容器内的排列情况。

摘要由CSDN通过智能技术生成

float: 浮动

特点：

脱离文档流（类似浮于页面上方效果）
虽然脱离文档流，但是下一元素仍然会把位置留出来，不会占用该位置
会造成父容器高度坍塌
使元素块级化
元素块级化，但是其浮动左/右侧，并不会自动填充为margin.
下面通过几段代码说明上面几个特点
第1、2、4 点说明

 <style>
        .float {    
            float: left;
              <!-- a 标签可以设置宽高了，说明浮动可以使元素块级化 -->
            width: 100px;  
            height: 100px;
            border: 1px solid red;
        }
        .normal {
        	idth:200px
            height: 50px;
            border: 1px solid black;
        }
        </style>
        <body>
    <div id ="app">
        <a class="float">
        </a>
        <div class="normal">我是normal</div>
          <!-- 由于float浮动脱离文档流，所以normal的定位位置会忽略float 元素的存在，从起点开始。但是normal的内容会从float 元素之后开始 -->
       
    </div>

</body>

在这里插入图片描述

第5点说明
在这里插入图片描述

float 与normal 的右侧对比如上，浮动元素的左侧并不会自动填充为margin.
浮动引起父容器高度坍塌

  <style>
        .float {
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        </style>
<body>
    <div id ="app">  <!-- 父节点：app高度为0，发生了高度坍塌。 解决办法：父容器开启BFC，具体请自行百度-->
        <a class="float">
        </a>
    </div>

</body>

在这里插入图片描述
其他说明

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <style>
        
        .first {
            float: left;
            width: 100px;
            height: 150px;
            border: 1px solid red;
        }
        
        .second {
            float: left;
            width: 1000px;
            height: 100px;
            border: 1px solid black;
        }
        
        .third {
            float: left;
            width: 600px;
            height: 100px;
            border: 1px solid yellow;
        }
    </style>
</head>

<body>
    <div id="app">
        <a class="first"></a>
        <a class="second"></a>
        <a class="third"></a>  <!-- 注意这个元素的浮动位置 -->
    </div>

</body>

</html>

在这里插入图片描述