常规流盒子和浮动盒子混合摆放

1. 浮动盒子在摆放时，要避开常规流盒子；
2. 常规流盒子在摆放时，无视浮动盒子；
    注释：在设置浮动时，浮动盒子会**脱离文档流**；文档流表示浮动元素的内容不占用父级区域（content）；
    文档脱离会导致高度坍塌；（因为常规流盒子会无视浮动盒子）
    解决文档坍塌除了用（overflow：hidden；）找回坍塌的高度；还可以用清除浮动（clear：both；）找回坍塌高度

常规流遇上浮动

清除浮动 ：对一个元素清除浮动，可以让该元素在摆放时，出现在浮动元素的下方

clear属性
    不可继承
    默认值：none
    取值：none（不清除浮动）
         left（清除左浮动，元素在左浮动的盒子下方摆放）
         right（清除右浮动，元素在右浮的盒子下方摆放）
         both（清除左右浮动，元素浮动的盒子下方摆放）
    注释：对最后一个子元素使用（clear：both；），可防止父元素高度坍塌

视觉格式化模型————浮动：当元素的float属性的取值为left或right时，元素属于浮动定位

属性float
    不可继承
    默认值：none
    取值：none、left、right

盒模型中的auto（自动）值
    属性：
    margin-left:auto;
    margin-right:auto;
    margin-tpo:auto;
    margin-bottom:auto;
    width:auto;
    height：auto；

浮动：
    0px
    0px
    0px
    0px
    适合内容宽度
    适合内容高度

 

转载于:https://www.cnblogs.com/maxinyu/p/8907719.html