关于前端:CSS-浮动-float-小结

68次阅读

共计 2974 个字符,预计需要花费 8 分钟才能阅读完成。

引子

在保护一些我的项目的时候,发现不少中央用 float 来进行布局,晓得这个属性的作用成果,也晓得怎么解决相干的问题,但就是不能进一步说出一个所以然来,就整顿一下了。

  • Origin
  • My GitHub

约定

这里是为了了解 float 相干的问题和解决办法,不去比拟它们的优劣和兼容性,要置信将来是越来越美妙的。根本的 html 构造如下:

<div class="float-parent">
  <div class="float-ele fl"></div>
</div>

以下所讲示例页面:CSS 浮动 float 相干初解示例

手机端浏览

浮动的用处

浮动设计的初衷,是为了实现文本盘绕成果。在一些教程外面,对于浮动的介绍没有强调这个,而是讲如何利用这个属性的作用,去实现一些所谓“乏味”的成果。尽管拓展了思路,但感觉并没有用的适合。

浮动的介绍

W3C 文档外面说的很简洁:这个属性指定一个盒子浮动到右边、左边还是不浮动。上面是摘取过去的根本个性。

Value: left | right | none | inherit
Initial: none
Applies to: all,but see 9.7
Inherited: no

上面就是相干阐明和一些留神项。

重要的认知

浮动使元素从失常的文档流中移除,脱离了失常的文档流。而后向左或者向右平移,始终挪动直到碰到了所处的容器的边界,或者碰到另外一个浮动的元素。

值的作用

  • left:元素会产生一个块级盒子向左浮动,失常的文档流会从这个盒子的左边和顶部开始。
  • right:跟 left 属性值相似,只是元素产生的块级盒子向右浮动,失常的文档流会从这个盒子的右边和顶部开始。
  • none:这个盒子不浮动。

display, position 和 float 之间的关系

屡次看到有人把这些属性写在一起,感觉是在用试错的心理写 CSS。以下状况示例页面:display、position 和 float 之间的关系示例。精力有限,规定利用下只试了局部取值状况。

这三个属性影响盒子产生和布局,它们相互影响有以下的程序规定判断:

  1. 如果 display 的属性值为 none,那么 positionfloat 属性不会利用。这种状况不会产生盒子。
  2. 否则,如果 position 的指定值为 absolutefixed,这个盒子会是相对定位,float 的计算值会取 nonedisplay 的取值规定依照上面的表格所示。这个盒子的地位取决于 toprightbottomleft 属性和这个盒子的蕴含块。
  3. 否则,如果 float 指定了 none 之外的值,这个盒子就会浮动,并且 display 取值规定依照上面的表格所示。
  4. 否则,如果这个元素是根元素,display 取值规定依照上面的表格所示。但在 CSS2.2 有一种状况例外,指定为 list-item 的值变成计算值为 blocklist-item 时,它的值未定义。
  5. 否则,剩下的 display 属性值依照指定的值利用。
指定的值 计算值
inline-table table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
others same as specified

由以上的规定可知,将这些属性写一起,有些时候并不会起作用。对于不相熟的人反而会造成不必要的困惑。

浮动的束缚规定

束缚的规定有不少,但理论中碰到的状况,并没有那么多,感觉要关注理解的点有 3 个:

  1. 浮动元素的蕴含块,是其最近的块级父元素;
  2. 蕴含块对于浮动元素的边界是指内容区的边界;
  3. 多个浮动元素之间的相互影响。

相干具体介绍见这里。如果之后理论中碰到相干状况,需在此进行补充。

浮动的问题

这个就是家喻户晓的父元素高度坍塌问题,因为脱离了文档流,这个是能够设想到的。为了解决这个问题,呈现了 2 种说法:革除浮动 闭合浮动 。看了这篇文章,感觉说的很有情理,咱们是为了解决高度坍塌的问题, 革除浮动 只是其中的一种办法,叫 闭合浮动 更为适合谨严。

闭合浮动的办法

办法 1:利用属性 clear

款式属性 clear

构造变成如下

<div class="float-parent">
  <div class="float-ele fl"></div>
  <div class="clear-fix"></div>
</div>

新增的款式为:

.clear-fix {clear: both;}

这个就是应用了 CSS 属性 clear 的个性,这个属性指出元素盒子的那边不会跟更早浮动盒子相邻,值为 both 的含意是:

在源文档外面,如果有比该元素比拟早的浮动元素,须要让该元素的顶部 border 边界在,任何右浮动或左浮动元素底部外(margin)边界之下。

标签属性 clear

<div class="float-parent">
  <div class="float-ele fl"></div>
  <br clear="all" />
</div>

这个作用跟 CSS 模式一样,标签上的属性 clear 在 html5 中曾经被废除了,倡议应用 CSS 属性 clear

办法 2:利用伪元素

/* 增加到父元素上 */
.close-float-method2:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

这个就是用伪元素的形式代替额定的标签,次要属性还是用到了 clear。这个办法据说在跨浏览器时有问题,外面提到的是 ie7,就没有去尝试,具体见这里。

办法 3:利用属性 overflow

/* 增加到父元素上 */
.close-float-method3 {overflow: hidden;}

这个就要提到一个概念 Block formatting contexts(块级格式化上下文)。

浮动、相对定位元素和块级蕴含块(比方 inline-blockstable-cellstable-captions)都不是块级盒子,overflow 属性值取 visible 之外值的块级盒子为它们的内容建设新的块级格式化上下文。

在一个块级格式化上下文中,垂直方向上,盒子的搁置是一个接一个,从一个蕴含块的顶部开始。垂直方向上两个相邻盒子的间隔由 margin 属性决定。垂直边距在同一个块级格式化上下文中会产生重叠。

在一个块级格式化上下文中,每个盒子的左外边界跟蕴含块的左边界相接触。这个对于浮动的展现同样是实用的,除非这个盒子建设了一个新的块级格式化上下文。

这里应用了 overflow 后建设了块级格式化上下文,蕴含了浮动元素,所以就闭合了浮动。

以上所讲相干示例页面:CSS 浮动 float 相干初解示例

参考资料

  • https://developer.mozilla.org…
  • Positioning the float: the ‘float’ property
  • 那些年咱们一起革除过的浮动
  • clearfix 改进及 overflow:hidden 详解【译文】
  • Controlling flow next to floats: the ‘clear’ property
  • Block formatting contexts
  • Everything you Know about Clearfix is Wrong
  • CSS float 浅析

正文完
 0