css浮动筹划断根浮动

【浮动定义】

1. 浮动元素会离开标准流（脱标）。

2. 浮动会一行内展示，划断并和其他元素对齐，根浮在以下空间中。动筹动

3. 浮动元素会具有行内块元素的划断特点  ，都加了浮动，根浮可以在一行并排展示 。动筹动

4. 加了浮动盒子会飞 ，划断上面的根浮盒子就会占体味飞盒子的职位 ，继而加浮动的动筹动盒子会压住上面的盒子

5. 两个盒子加了浮动都邑飞，那就顶端举办一行排序（父元素必定要有宽高）

6. 行内块加上浮动，划断他就具有行内块元素特质
   。根浮

7. 加上浮动的动筹动元素 ，没有设置宽度，划断是根浮屈就你内容若干很多若干良多若干很多若干良多若干很多若干来决意宽度的。

8. 加了浮动是没有裂缝的

9. 浮动只会影响上面的元素浮动

10. 浮动元平平素和父级元素搭配独霸

11. 标准流父盒子 > 子元素加浮动 > 先预备一个除夜盒子居中
    ，在预备几个浮动子元素对齐

12. ul 做除夜盒子，li做小盒子

【浮动css写法】

.fl { 
   float: left;
}

.fr { 
   float: right;
}

断根浮动

推荐伪元素断根浮动（推荐）

.clearfix::before,
.clearfix::after { 
    content: "";
    display: table;
}

.clearfix::after { 
    clear: both;
}

.clearfix { 
    *zoom: 1;
}
/*父级太添加伪元素*/

百度了然浮动的格式

.clearfix::after { 
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix::after { 
    *zoom: 1;
}
/*父级太添加伪元素*/

多余的部分会被切损掉落踪落

overflow: hidden;
/*父级添加代码*/