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/

关注我们的公众号

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180328G1TJW900?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券