image.png
记住:1.浮动要和标准流搭配
2.一浮全浮,在哪浮起来的就在哪飘着,不会自己移动位置。
还有第三个重要的注意点:

3.父盒子的高度不应该写死

应当让子盒子撑开父亲,有多少孩子,父盒子就有多高。所以父盒子可以不设置高度,但是这样也有问题,一旦子盒子浮动起来,就不占有父盒子的位置了,父盒子的高度就会变成0,为了解决这种矛盾,所以我们要清除浮动

4.浮动的元素不会压住下面标准流内的文字

我们学习了,浮动的元素其位置会被其他标准流盒子代替,浮动元素会压在其上面,但是标准流盒子内的文字不会被遮挡,而是会被挤开到没有遮挡的位置。
如图:
image.png
原因:
image.png