一 float 设计初衷
因为 float 被设计出来的初衷是用于文字环绕效果即, 一个图片一段文字, 图片 float:left 之后, 文字会环绕图片
<div style="width: 100px;height: 100px">
<img src="image/1.jpg" style="width: 50px;height: 50px;float: left">阿斯利康大家啊胜利大街拉速度来喀什建档立卡结算单
</div>
二 float 多个特性
2.1. 破坏性
首先大家来看两个 demo, 如下图第一个 demo 是一个简单不过的例子, 显示效果也很正常第二个 demo, 唯一的区别就在于 < img > 加了 float:left, 上层的 < div > 却出现了坍塌现象
不过, 这就是 float 的破坏性 float 破坏了父标签的原本结构, 使得父标签出现了坍塌现象导致这一现象的最根本原因在于: 被设置了 float 的元素会脱离文档流
初次接触脱离文档流的朋友可以这样理解: div 是父亲, img 是它的儿子, 原本好好的父子关系, 原本爷俩可以体面的展示一个包含关系的效果直到有一天, img 被设置了 float 老天爷 (浏览器) 规定, 任何 float 元素都不允许再呆在自己的家族中, 于是 img 被逐出家门, 断绝和 div 父子关系于是乎, div 没有了 img 儿子, 也就不能再展示这种父子的包含关系, 于是两者就各过各的, 互不相干这样一说, 容易理解了吧?
但是, 永远都不要忘记 float 被设计的初衷实现文字环绕效果当 div 中有文字时, 文字还是会环绕在 img 周围的如下图: 文字环绕后又把父元素撑起来了
好了, 大家现在已经知道了 float 具有破坏性, 可能也有很多朋友之前就知道这一特性, 但是你有没有思考一下: float 为什么会被设计成具有破坏性, 为什么会脱离文档流? 这一点非常重要! 其实原因非常简单为了要实现文字的环绕效果?
有人可能会问: 啊? 你刚才不是说了 float 的初衷就是实现文字环绕效果吗? 和破坏性有啥关系?
这时我会反问你: 如果 float 不让父元素坍塌, 能实现文字环绕效果吗? 给你两个图看看你就知道了
2.2. 包裹性
如上图, 普通的 div 如果没有设置宽度, 它会撑满整个屏幕, 在之前的盒子模式那一节也讲到过而如果给 div 增加 float:left 之后, 它突然变得紧凑了, 宽度发生了变化, 把内容王福朋三个字包裹了这就是包裹性 div 设置了 float 之后, 其宽度会自动调整为包裹住内容宽度, 而不是撑满整个父容器
注意, 此时 div 虽然体现了包裹性, 但是它的 display 样式是没有变化的, 还是 block
说道这里咱们回顾一下, 在之前的博客中, 也提到了包裹性, 是哪些样式? 你可以在此思考一下, 我会在博客的评论中给出答案
知道了包裹性之后, 我们还是继续思考: float 为什么要具有包裹性? 其实答案还得从 float 的设计初衷来寻找, float 是被设计用于实现文字环绕效果的文字环绕图片比较好理解, 但是如果想要让文字环绕一个 div 呢? 此时 div 不被包裹起来, 那么如何去实现环绕效果?
2.3 清空格
float 还有一个大家可能不是很熟悉的特性清空格按照管理, 咱还是先举例子说明
上图中第一个例子, 正常的 img 中间是会有空格的, 因为多个 < img > 标签会有换行, 而浏览器识别换行为空格, 这也是很正常的第二个例子中, img 增加了 float:left 的样式, 这就使得 img 之间没有了空格, 四个 img 紧紧挨着
如果大家之前没注意, 现在想想之前写过的程序, 是不是有这个特性为什么 float 适合用于网页排版(俗称砌砖头)? 就是因为 float 排版出来的网页严丝合缝, 中间连个苍蝇都飞不进去
清空格这一特性的根本原因是由于 float 会导致节点脱离文档流结构它都不属于文档流结构了, 那么它身边的什么换行空格就都和它没关系的, 它就尽量的往一边去靠拢, 能靠多近就靠多近, 这就是清空格的本质
三清除浮动
float 具有破坏性, 它会导致父元素坍塌, 这将不是所要看到的如何去避免 float 带来的这种影响呢(也就是我们常说的清除浮动) ? 方法有很多种, 我在这里介绍 4 中供大家参考, 大家可根据实际情况来选择
为父元素添加 overflow:hidden 这样父元素就有高度了 , 父元素的高度便不会被破坏;
浮动父元素
这两个方法比较简单, 在这里也就不再演示了, 大家有兴趣的可以自己去试试
第三种方法也不是很常用, 但是大家要知道 clear:both 这个东西通过在所有浮动元素下方添加一个 clear:both 的元素, 可以消除 float 的破坏性
接下来的第四种方法是大家最需要掌握的, 也是我推荐的, 也是 bootstrap 正在用的 clearfix 不知道的同学一定要去搜一下, 要不然就太 low 了!
上图中, 我们定义一个. clearfix 类, 然后对 float 元素的父元素应用这一样式即可, 非常简单吧? 注意, 你可能会搜出不同版本的 clearfix, 有的代码比上图中的代码多, 你不用理会它, 就按照我的贴图的代码写就行
究其原理, 其实就是通过伪元素选择器, 在 div 后面增加了一个 clear:both 的元素, 跟第三种方法是一个道理
4. 浮动的应用(使用 float 做网页布局)
1. 设置 float 属性后, 元素实际上会 inline-block 块状化
2. 可以去掉排列间的空格
设置浮动后, 元素就变为块级元素了
但最好的应用还是应该让他去实现文字的环绕效果, 比如单侧固定的流体布局, 用: float+margin 来实现
大布局时可以用一下, 小的布局时可以考虑用 inline-block 来砌砖头(但是会有小间距, 具体应用时看), 尽量不要滥用
来源: https://www.cnblogs.com/chaixiaozhi/p/8481778.html