float浮动你所不知道的用法详解

对于web前端开发人员，你对float一定不会陌生。你离不开它，却常常忍受着它给你带来的种种痛苦，也许你觉得它就那么一点儿知识，但是你真的能驾驭它么？如此熟悉的它，却常常变得让你不认识，显得那么陌生，以至于你觉得它丧心病狂到令人发指的地步。

这是加了float的效果

看到了么？区别是不是很明显？p标签完全脱离了p，脱离了文档流。

二、包裹性

块级元素如果不设置float，它默认会撑满整个屏幕，而如果设置了float，则只会包裹住其内容，直接上例子吧。

这是没有float的p

这是添加了float的p

这样就很直观了吧。

三、清除空格

float还有一个很有用的特性，就是清除空格。这个我不贴图片了，描述一下就好了。比如在一个p里面放我张图片，图片与图片之间默认会有几像素的空格，也可以称之为缝隙。但是往往这个缝隙或者空格并不是我们需要的，这时候只要给图片一个float，让其脱离文档流，图片与图片之间将会严丝合缝的在一起。

好了，以上就是我今天要讲的内容。

最后分享大家一句自创的格言：不要小瞧任何一个你认为很简单的知识点，高大上的网站都是由这些简单的知识点所组合起来的。

如果您喜欢我的文章，欢迎随意哦！

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

以上就是float浮动你所不知道的用法详解的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于float浮动你所不知道的用法详解的详细内容...