CSS中的float-每日一招

概述

CSS中使用流布局和内容功能已经足够强大，他们能实现瀑布式布局，应付一般的方方正正布局也没任何问题，但对一些特殊布局就比较吃力，比如图片文字环绕等，float专门为此而生（浮动的本质就是为了实现文字环绕效果），记住，它不是为布局而生，而是后来很多前端人员都把它作为布局的利器实现Div+Float布局，但记住，基于float构建的页面布局是不稳定的（就像造房子不使用钢筋一样，没有柔性），比如修改其中一个div的height或width，都有可能造成页面混乱，比如以下最简单的布局，因为最后一个div宽度修改了，就造成布局混乱：

理解float父容器高度坍塌

我们知道，一个block元素被设定为float:left，那么它的父容器高度会坍塌（高度为0），这不是Bug，而是float的设计初衷，试想一下，如下代码：

如果img的父容器高度不坍塌，p区域的文字怎么绕着img走，实现如下效果：

上面的p标签可去掉，因为设置了float:left，后续block元素的流动性就被破坏了，不写也是一样的效果，它们的宽度是父容器定义的（自适应性），但如果是连续的英文字符，这些英文字符因为不断词，会脱离父容器而存在；

永远记住：float不是用来布局的，它的设计初衷就是为了实现文字环绕，造成父容器高度坍塌绝不是浏览器的“Bug”，而是标准；

float作用机制

浮动的元素在同一水平线上，行框盒子和浮动元素具有不可重叠性，这也是float能实现文字环绕的根本所在，比如上例，其实文字和图片是在一起的，都文字却被浮动元素限制，不可重叠，所以文字只能绕着图片走，作用float的子元素可相对父容器设定比如margin-left（只是作用这个子元素的行框模型margin-left发生变化，效果就是环绕图片的下方文字会发生margin-left偏移，图片右边的文字则不会）;

使用float布局

如果利用float布局一个两列的自适应布局呢？比如左边宽度为100px，右边自适应，代码如下：

利用的特性就是第一列定死宽度，第二列不要设置浮动，也没有设置width，会根据父容器的大小而改变（流动性），为了不环绕左边的div，所以将右边的div margin-left第一个div的宽度即可，那如果左侧和右侧的是比例宽度，比如3:7，那也是可以的，只是将左侧的div width定位为30%即可；

那么有不借助margin-left实现自适应的办法么？答案是肯定的，使用BFC特性（块级格式化上下文），触发BFC条件（满足其一即可）：

html根元素

float值不为none；

overflow为auto，scroll或hidden；

display值为table-cell,table-caption,inline-block中一种；

position值不为relative和static；

所以，为了实现上述自适应，使用下面代码也是可以的：

BFC有自己的“结界”，不与float元素发生任何交集，也就实现了自适应，这种自适应布局与纯流体自适应更加“智能”，就是说修改第一列的div，我们无需修改第二列div的margin-left了。

在布局Div+CSS时，最彻底清除浮动的属性不是大家熟知的clear:both，而是overflow，利用BFC特性彻底解决浮动元素对外部或兄弟元素的影响，设定overflow:hidden裁剪的边界是border box的内边缘，而不是padding box的内边缘。

在基于float布局中，我们还经常使用到position:absolute，用于将某元素定位在父元素的右上角，左下角等；

本文的所有实例代码被发布在：https://jsfiddle.net/kongshanxuelin/axbhLL3z/1/

关注我们的公众号