浮动 · 2021 web前端工程师

[TOC] # 布局 ![](https://img.kancloud.cn/99/c9/99c9228654a532f11358b7f5db8c9dcf_1033x603.png) # 浮动 ![](https://img.kancloud.cn/63/a0/63a02a736ac67ced949f9ca401ffe41b_736x422.png) ## 语法 ![](https://img.kancloud.cn/da/2f/da2f14c65319f09c39720f94491c5bf7_877x387.png) # 浮动与父盒子关系 ![](https://img.kancloud.cn/b5/02/b502f1da03ecd00615031e688bbb6add_739x216.png) # 浮动兄弟关系 **浮动只会影响当前的或者是后面的盒子，不会影响前面的标准流。** ![](https://img.kancloud.cn/d8/a7/d8a7466b48b8fd7eecb41e0ce79e4b91_803x815.png) ![](https://img.kancloud.cn/0b/7c/0b7c5f654e2de33fb69af12236f31c16_735x475.png) ## 建议 ![](https://img.kancloud.cn/52/c0/52c0ca16dd344b02e3cacb365d66adb9_1068x111.png) # 清除浮动（解决页面因浮动混乱） ![](https://img.kancloud.cn/a1/09/a1096895cb28d58023b6d209e747146c_1172x218.png) ![](https://img.kancloud.cn/a7/b3/a7b3492f7599bdeaced4532fbc3c3866_1266x724.png) ## 清理浮动方法（在父元素加） ![](https://img.kancloud.cn/3f/94/3f949fab66ea310983d25a045d446e1e_879x508.png) ![](https://img.kancloud.cn/6c/b8/6cb8bcb4111fd190c535ccc1eb03709d_1182x442.png) ![](https://img.kancloud.cn/cd/c6/cdc658a69ba26943b7c68b19ed77cd2c_1157x538.png) # 重点 ![](https://img.kancloud.cn/57/7c/577c7b6a815940a7b2d07c3b95255891_1224x521.png) # 每次都要用 :after ![](https://img.kancloud.cn/10/74/107420af72405984dc9bda785c06e407_923x508.png) # 双伪浮动清除浮动 ![](https://img.kancloud.cn/9e/86/9e867d18d040f1389697e3b0dc051fca_923x639.png) ![](https://img.kancloud.cn/b3/82/b3829163b86dde878718faeae9b34d2d_479x498.png) # 清理浮动总结 ![](https://img.kancloud.cn/5b/3d/5b3dad64e6b93f9f3749d97656bbbe08_1218x670.png) # 重点代码 ~~~ .clearfix:after{ content:""; display:block; visibility:hidden; clear:both; } clearfix { * zoom :1; ~~~