css浮动

前言

这篇是随缘复习一下CSS的浮动orz，对，非常随缘

正文

怎么设置浮动

/* 设置左浮动 */
float : left;
/* 设置右浮动 */
float : right;
/* 默认值 */
float : none;

设置了浮动的元素会发生什么变化

元素必定为块盒(display设置为block)
浮动元素的包含块和常规流一样，是父元素的内容盒

盒子尺寸会发生什么变化

宽度为auto时，适应内容宽度
高度为auto时，和常规流一致，适应内容的高度
margin为auto时，相当于设置成0
边框，内边距，百分比和常规流一样

盒子怎么排列

左浮动的盒子，从左上角开始依次往右排列
右浮动的盒子，从右上角开始依次往左排列
如果浮动盒子前面有常规流块盒，会避开常规流块盒
常规流块盒在排列时，无视浮动盒子
行盒在排列时，会避开浮动盒子（文字是被匿名行盒包裹的，所以文字会避开浮动盒子）
外边距不会发生合并，因为只有常规流会发生边距合并

你可以记忆成，常规流块盒是在地上的，设置了浮动的元素会在天上飞，在天上飞的元素可以看得到地上的块盒，然后在排列时避开它，但是在地上的常规流块盒看不见天上飞的浮动元素，所以在排列时会直接跟着上一个常规流盒子

你可以使用下面的例子来验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
    <style>
        .left {
            width: 100px;
            height: 200px;
            background-color: darkseagreen;
            float: left;
        }
        .right {
            width: 100px;
            height: 200px;
            background-color : cornflowerblue;
            /*overflow: hidden;*/
            float: right;

        }
        .normal {
            height: 200px;
            background: darkturquoise;
            /*overflow: hidden;*/
        }
        .rua {
            background: orange;
            height: 100px;
        }
        .clear {
            clear: both;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="rua">rua</div>
    <div class="left">left</div>
    <div class="left">left</div>
    <div class="rua">rua</div>
    <div class="right">right</div>
    <div class="right">right</div>
    <div class="normal">normal</div>
    <div class="clear">clear</div>
    <img src="./head.png" alt="" width="200px" style="float: left">
    <p style="margin: 0">当这根针的速度达到0.999999999999999999999999999999999999999999光速时，地球将会被彻底毁灭，再也不复存在。 以下是计算过程： 我们姑且认为题主所谓的针是缝衣针。 一根长5cm左右，粗0.1cm左右的针（针数据可查证），体积不高于：
        [公式] 已知铁的密度为：7.86g/cm³，可得这根针的质量不高于0.3g。 由于针有大有小，我们姑且认为射向地球的这根缝衣针稍大，质量正好0.3g，即： [公式]
        光速： [公式] 根据狭义相对论，易知，近光速时针的动能为： [公式] 当为（1-1/10^2）光速时（即99%光速），动能为：1.64×10^14 J
        人类当前一秒钟消费的能源约为2×10^13 J，尚远不及这根针蕴含的能量。 已知一吨TNT爆炸产生约4.2×10^9 J的能量，可知，这根针的总能量相当于3.9万吨TNT，是小男孩核当量的2倍多。 介于评论区有人认为针可以直接穿过地球，我这里详细说明一下：
        当这根针的速度达到0.999999999999999999999999999999999999999999光速时，地球将会被彻底毁灭，再也不复存在。 以下是计算过程： 我们姑且认为题主所谓的针是缝衣针。 一根长5cm左右，粗0.1cm左右的针（针数据可查证），体积不高于：
        [公式] 已知铁的密度为：7.86g/cm³，可得这根针的质量不高于0.3g。 由于针有大有小，我们姑且认为射向地球的这根缝衣针稍大，质量正好0.3g，即： [公式]
        光速： [公式] 根据狭义相对论，易知，近光速时针的动能为： [公式] 当为（1-1/10^2）光速时（即99%光速），动能为：1.64×10^14 J
        人类当前一秒钟消费的能源约为2×10^13 J，尚远不及这根针蕴含的能量。 已知一吨TNT爆炸产生约4.2×10^9 J的能量，可知，这根针的总能量相当于3.9万吨TNT，是小男孩核当量的2倍多。 介于评论区有人认为针可以直接穿过地球，我这里详细说明一下：
        人类当前一秒钟消费的能源约为2×10^13 J，尚远不及这根针蕴含的能量。 已知一吨TNT爆炸产生约4.2×10^9 J的能量，可知，这根针的总能量相当于3.9万吨TNT，是小男孩核当量的2倍多。 介于评论区有人认为针可以直接穿过地球，我这里详细说明一下：
        人类当前一秒钟消费的能源约为2×10^13 J，尚远不及这根针蕴含的能量。 已知一吨TNT爆炸产生约4.2×10^9 J的能量，可知，这根针的总能量相当于3.9万吨TNT，是小男孩核当量的2倍多。 介于评论区有人认为针可以直接穿过地球，我这里详细说明一下：
    </p>

</div>
</body>
</html>

值得注意的是这里的p元素，实际上它是紧跟着.clear占据了整个行的，但是文字被行盒包着，所以避开了图片

顺带一提，这里的的第二个.rua也是占据了整一行的

什么是清除浮动

设置下面的属性来清除浮动

/* 默认值 */
clear : none;
/* 清除左浮动，设置了这个属性的元素会出现在前面所有左浮动盒子的下方 */
clear : left;
/* 清除右浮动, 设置了这个属性的元素会出现在前面所有右浮动盒子的下方 */
clear : right;
/* 同时清除左右浮动, 设置了这个属性会出现在前面所有浮动盒子的下方 */
clear : both;

效果如下