CSS浮动属性

什么是CSS的浮动属性？CSS的浮动属性是用来控制块级元素在一行内显示，实现块级元素的浮动效果。它包括float：left左浮动，float：right右浮动。当没有给对象设置浮动属性时，因为是块级元素的原因如div、ul、li等等，都是独占一行，默认自上而下排列。
HTML代码如下图所示：

CSS代码如下图所示：

效果图如下图所示：

当给第一个元素添加左浮动属性之后，第一个元素就具有了浮动的效果，此时第二元素会消失，不是说第二个元素不存在了，而是第一个元素会把第二个元素覆盖掉，因为在加了浮动效果之后，第一个元素就不在存在于文档流当中。
此时的CSS代码如下图所示：

效果图如下图所示：

如果只给第二个元素添加浮动效果，那么同样的，此时的第二个元素就会把第一个元素覆盖。如果想要两个元素同时出现，就必须给元素同时添加浮动效果。
此时的CSS代码如下图所示：

效果图如下图所示：

当浮动元素所占空间太大，剩下的空间不能够让其他元素进行浮动，那么这些元素就会被挤出来。
CSS代码如下图所示：

效果图如下图所示：

此时第一个元素占了400px，父元素的大小是500px，剩下的100px不足以让第二个元素进行浮动，它会在第一个元素的下方显示，因为添加了浮动属性的元素会一直浮动直到它的外边缘遇到包含框或者另一个浮动框的边缘。
出自于：逆战班 罗阳

前面是转载的别人的博客 ：https://blog.csdn.net/weixin_43907943/article/details/104467163 下面是自己的总结：

• 浮动元素将不在页面占空间
• 浮动元素依旧位于边框之内
• 浮动元素不会相互重叠
• 清除浮动
  
  在标准流中内容的高度可以撑起盒子的高度
  在浮动流中浮动元素内容的高不可以撑起盒子的高

html

<div id="box">
    <div></div>

</div>

css

		#box{
            background: chartreuse;
            width: 100px;
            
        }

        #box>div:first-child{
            background: brown;
            width: 30px;
            height: 30px;
            float: left;

        }

在浮动流中浮动元素内容的高不可以撑起盒子的高,所以结果就是父类div高度为0，只显示子类

为了清除浮动，给前面的父盒子添加高度,利用clear:both;属性清除前面浮动元素对我的影响,用overflow:hidden;清除浮动等方法

• 用overflow或者自己设置高度

效果

• 使用clear:both
  html

<div id="box">
    <div></div>
    <div class="clear"></div>
</div>

css

#box{
            background: chartreuse;
            width: 100px;
            clear: both;
        }

        #box>div:first-child{
            background: brown;
            width: 30px;
            height: 30px;
            float: left;

        }

        .clear{
            clear: both;
        }