#【博学谷学习记录】超强总结，用心分享# 浮动篇一、什么是浮动首先我们知道在html元素默认是的排列方式是标准流，

一、什么是浮动

首先我们知道在html元素默认是的排列方式是标准流，浮动就是让元素脱离标准流。

  <style>
       

        .one{
            width: 200px;
            height: 200px;
            background-color: green;
           /* 添加左浮动 */
            float: left;
        }

        .two{
            width: 500px;
            height: 500px;
            background-color: red;
        }
    </style>
</head>
<body>
        <div class="one"> </div>
        <div class="two"></div>
</body>

因为浮动使绿色盒子脱离了标准流，所以浏览器认为红色盒子前面没有盒子占有空间，便按照标准流的排列方式去排红色的盒子

二、浮动的特点

浮动元素会脱离标准流
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面，左右浮动
浮动元素有特殊的显示效果(有行内块标签的特点)

由上图我们可以看到浮动的前两个特点，即脱离标准流，且比标准流高半级，会覆盖标准流中的元素。

特点3-特点4

 <style>
       

        .one{
            width: 200px;
            height: 200px;
            background-color: green;
            /* 添加左浮动 */
            float: left;
        }

        .two{
            width: 500px;
            height: 500px;
            background-color: red;
        }

        .four{
            width: 200px;
            height: 200px;
            background-color: green;
            /* 添加左浮动 */
            float: left;
        }

        .three{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /* 添加右浮动 */
            float: right;
        }
    </style>
</head>
<body>
        <div class="one">左</div>
        <div class="three">右</div>
        <div class="four">左</div>
        <div class="two"></div>
       
</body>

可以看到浮动后的盒子宽高依然是生效的,且浮动的盒子会去找前一个浮动的盒子

需要注意的是：如果父级宽度不够，子级会自动换行

三、清除浮动

为什么要清除浮动

父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响。（子级浮动，父级没有高度，子级脱离文档流，父级没有高度不显示，后面的标准流会与其层叠在一起）示例：

 <style>

        .fu{
            width: 500px;
            background-color: red;
        }

        .zi{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            
               
            /* 添加浮动 */
            float: left;
        }

        .other{
            width: 300px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
<body>
       <div class="fu">
            <div class="zi"></div>
       </div>

       <div class="other"></div>
       
</body>

解决办法

直接给父元素加高度
单伪元素法
双伪元素法
给父元素加 overflow：hidden

/*单伪元素法*/
.clearfix::after{
    content:"";
    dispaly:block;
    clear:both;
/*补充代码，在网页中看不到伪元素*/
    height:0;
    visibility:hidden;
}


/*双伪元素法*/
.clearfix::before,
.clearfix::after{
    content:"";
    display:"table"
    
}

.clearfix::after{
    clear:both;
}


/* 给父元素加 overflow：hidden*/
.fu{
    overflow:hidden;
}