css浮动与清除浮动

Paste_Image.png

css浮动（float：none | left | right）在网页布局中我们经常使用的属性，也是经常会出现Bug的地方。
首先我们要搞清楚为什么要用到float呢?
网页布局中块级元素，在页面中独占一行，自上而下排列，也就是传说中的文档流。

Paste_Image.png

可是我们要实现左右模块该怎么实现，这就需要用到float了，当我把第三个设置左浮动

Paste_Image.png

我们通过调整透明度知道，第三个是漂浮在第四个上面的，但是第四个的文字会被挤到第三个后面。我们看到第三个元素并没有浮动到第一个和第二个元素上而是浮动到第四元素上，所以浮动只遮盖后面的元素并把元素内部的文本挤到周边。

然后我们在测试第四个也设置左浮动

Paste_Image.png

我们发现第四个并没有浮动到第三个的上面，而是跑到了第三个后面。所以浮动元素在碰到同样是浮动元素的时候会停止浮动。

下面我将第二个和第四个右浮动

Paste_Image.png

右浮动和左浮动都是一样的只对后面的元素有影响，碰到同样是浮动元素的时候会停止浮动。

我们在测试将第三个浮动取消

Paste_Image.png

我们发现和上个测试的区别，第四个没有紧挨着第二个，而是在第三个下边。从而说明浮动并不能影响他上面的元素。

可是在做网页布局的时候不想浮动元素影响遮盖下一个元素该怎么解决？
这个时候就需要我们清除浮动（clear：both | left | right）
上面的例子 希望第三个左浮动，第二个和第四个右浮动，第五个不受影响在最下面。

Paste_Image.png

首先我们要清楚要在那个元素上加清除浮动。我要第五个不受浮动影响，那我就在第五个上加清除浮动，是清除左浮动还是右浮动？谁盖住你 你就清谁的，要是不确定就直接 clear：both

本文章著作权归 杜宪 和饥人谷(QQ 群: 222459918) 所有，转载须说明来源