什么是浮动?有哪些清除浮动的方法?

浮动float出现的本意是用来实现文字像流水一样环绕浮动元素的效果。因为除了这个效果以外,float属性的其他应用都可以用其他css属性来实现。

由于CSS是一门相当灵活的语言。某个CSS属性被用于的场景,可能会完全违背当初创造该CSS属性的本意。就如今天我们要讲的float,因为可以很简单的实现多列布局而常被当作布局属性使用。


浮动的特性:

包裹性:浮动属性可以使block元素产生类似inline-block的状态使其产生包裹内容的效果。

破坏性(欺骗性):对行内盒inline-boxs设置浮动会破坏其所在行盒line-box的结构。

这个很好理解,因为浮动元素脱离了文档流,其父元素失去了内容,所以失去了高度。但浮动对其父元素line-box结构的影响不止于此。

可以理解为当元素浮动后,就如物体浮出湖面一样,不占距湖底空间,但是在湖底有个投影。而周围的内联元素就像胆小的鱼儿一样被影子欺骗,认为它就在哪里,所以不敢进去,只是围在一边。

浮动元素在脱离文档流的同时还会影响页面中的行内元素

浮动在文档流中的影响:

假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

demo

如果把上面这段定义中的浮动元素换为inline-block元素,他同样成立,所以说在某些方面float元素和inline-block元素是相同的。

同为在一行排列,浮动元素就像时打了强化剂的inline-block,使他能设置排列的方向,但同时会有副作用,如上面讲到的破坏性。

我们一方面要使用他的布局能力,另一方面又不希望他副作用破坏布局,所以在使用float的时候,我们还会想办法清除浮动。


有哪些清除浮动的方法?

1、使用clear 

clear : none | left | right | both

2、增加一个清除浮动的子元素

3、用:after伪元素

4、父元素设置 overflow:hidden

5、父元素也设成float

6、父元素设置display:table。

第一种方法只适合相邻浮动元素清除浮动,后面三种是触发了BFC,推荐使用第三种方法。

什么是BFC

BFC就是“块级格式化上下文”的意思,创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。

何为格式化上下文,个人理解就是将BFC容器进行格式化,使其不受上下元素的影响。

格式化具体指的是什么格式,可以参考html基本流,因为html本身就是一个BFC容器,大致特性如下:

内部的Box会在垂直方向,从顶部开始一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加

每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box叠加。

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。 计算BFC的高度时,浮动元素也参与计算。


参考文献:

CSS float浮动的深入研究、详解及拓展

CSS浮动(float,clear)通俗讲解

CSS浮动float详解

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,843评论 1 92
  • 我们在日常开发布局中经常会使用到流体布局,流体布局用到的一个最重要的属性就是浮动,今天就来看看浮动的相关知识。 1...
    一木_qintb阅读 1,158评论 0 2
  • 先前在学习CSS float时,有同学提到了BFC这个词,作为求知好问的好学生,哪里不懂查哪里,那么今天就来研究一...
    这名字真不对阅读 6,588评论 3 19
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 992评论 0 2
  • 投资基金必须要知道的——沉没成本 所谓“沉没”,就是已经消失。对于已经花掉的钱,人们总是不能够忘记,成本已经消失,...
    执着的80后阅读 514评论 0 5