乐趣区

关于前端:前端面试CSS系列清除浮动

jiezi

面试问答

问：如何革除浮动？

答：如果咱们晓得要分明浮动元素所在的地位，咱们能够在元素款式中应用 clear:both 革除元素相邻标签的浮动。除此之外，咱们还有三种技巧能够革除浮动：1、给父元素增加 overflow 属性；2、在浮动元素的父元素完结标签之前增加一个空的块级元素，而后为块级元素增加 clear:bothCSS 属性。3、应用伪元素:after，给父元素增加一个clearfix 款式类，给 clearfix 申明

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

款式来革除浮动。

什么是 Float

float是一个 CSS 定位属性，在理解 float 属性的目标和设计的初衷之前，咱们先看下印刷设计。在印刷设计布局中，能够将图片放到页面中，以便文本依据须要盘绕他们。这种形式通常被称为『文本包裹』，上面是一个例子。

在页面布局我的项目中，被『文本包裹』的盒子 Box 能够管制包裹的文本是『包裹』它，还是疏忽它。疏忽文本换行，让文字环绕着图片，就像图片不存在一样。WEB 网页设计跟它是十分类似的。

在 Web 网页设计中，利用了 CSSfloat属性的页面元素就像印刷设计布局中的图像一样，文本在图像四周流动。利用了 CSSfloat属性的 HTML 元素依然是网页失常流的一部分。这跟应用相对定位 position 属性定义的页面元素显著不同，相对定位的页面元素从网页失常流中移出，相对定位的页面元素不会影响其它元素的布局，其它元素也不会影响他们，不论利用的标签是否接触。

设置了浮动 float 属性的元素通常像上面这样：

#footer {float: right;}

浮动 float 属性有四个无效的值。left和 right 示意浮动元素的方向。None（默认值）示意元素不浮动，Inherit示意继承父元素的浮动值。

浮动能够做什么

除了在图像四周盘绕文本的简略示例之外，浮动还能够用于创立整个 Web 布局。

浮动也有助于在较小的实例中进行布局。以网页的这个小区域为例。如果咱们为咱们的小头像应用浮动，当该图像扭转大小时，框中的文本将重新排列以适应：

同样的布局也能够在父元素上设置绝对定位，子元素上设置相对定位的形式来实现。不过这种形式，文本将不受头像的影响，并且无奈在大小更改时重排。

浮动常见的用法有以下几种形式：

  1. 文本盘绕_案例
  2. 首字下沉_案例

  3. 多列布局

    1. 两列布局_案例
    2. 三列布局_案例

革除浮动

浮动 float 属性有个姊妹属性clear；设置了 clear 属性的元素不会像浮动所心愿的那样向上挪动到浮动左近，会向下另起一行。

如下图所示 Main Content 和Sidebar设置浮动时，有没有 clear 属性时的体现。

在下面图片的例子当中，Sidebar向右浮动，高度比 Main Content 短一些，如果有足够的空间，Footer会向上调到浮动元素下方。为了解决这个问题，能够为 footer 设置 clear 属性革除两边的浮动，确保它跑到两列的下方。

#footer{clear:both;}

革除 clear 属性有五个值：both,left,right,none,inherit。默认是none.

  • left 革除右边浮动
  • right 革除左边浮动
  • none 默认值，通常用不到，除非从级联中删除一个明确有 clear 属性的内容
  • inherit 元素继承其父元素的值
  • both 最罕用，革除左右两边的浮动

父元素塌陷

应用 float 属性，最让人头疼的事件之一是他们如何影响蕴含他们的元素（他们的『父』元素）。如果这个父元素只蕴含浮动元素，那么它的高度实际上会折叠成零。如果父级不蕴含任何视觉上显著的背景，你可能看不出来，但要留神这一点很重要。

只管父元素塌陷是反直觉的，但有些代替计划更糟，思考这个场景：

如果顶部的块元素主动扩大以包容浮动元素，咱们将在段落之间的文本流中呈现不天然的间距中断，并且没有理论的修复办法。如果是这种状况，咱们设计师对这种行为的埋怨会可能比咱们对塌陷（折叠）问题的埋怨要多得多。

简直总是须要解决塌陷（折叠）以避免奇怪的布局和跨浏览器问题。咱们通过在容器中浮动元素之后但在容器敞开之前革除浮动来修复它。

革除浮动的技巧

当咱们明确的晓得浮动元素地位时，咱们能够简略的应用clear:both。但明确的晓得浮动元素地位这种状况太过现实，咱们还须要在咱们的工具箱中有更多的革除浮动工具。

罕用有：

  • Overflow
  • 伪元素:after
  • 空 div 标签
Overflow 办法

溢出 overflow 办法依赖父元素上设置溢出 css 属性。如果此属性在父元素上设置为 auto 或 hidden，父级将扩大以蕴含浮动，无效的为后续的元素革除浮动。这种办法兴许体现的有更好的语义，因为它可能不须要额定的元素。然而，如果您发现自己增加了一个新的 div 来利用它，它与空 div 办法一样没有语义，而且适应性较差。还要记住的是，overflow 属性是不是专为革除浮动，要小心，不要暗藏内容或触发不必要的滚动条。

空 div 标签

顾名思义，就是一个空的 div 标签，div标签当中不放任何货色 <div style="clear: both;"></div>。有时候你可能会见到一个<br /> 标签货一些其它块级元素。不过 div 标签是最常见的，因为它自身不具备浏览器默认款式，没有任何非凡的语义和性能，不像 p 标签。不过应用这种办法会受到一些推崇 HTML 标签语义化开发人员的蔑视，因为它的存在对页面没有任何的意义，纯正是多余的，当然，从严格意义上讲，他们的认识是对的，不过它能够正确的实现目标并且不会影响到其它标签。

残缺的形容应该是——在浮动父元素完结标签之前插入革除浮动的块级元素。假如空块级元素为<div class='emptyClear'></div>。咱们还须要为其设置分明浮动的 CSS 属性

.emptyClear{clear:both;}

在父级元素开端增加的元素必须是一个 块级元素，否则无奈撑起父级元素高度。

:after 伪元素办法

最简略不便的办法是应用奇妙的 CSS 伪选择器 (:after) 来革除浮动。不必在父标签设置 overflow 属性，而是对父元素增加一个 classclearfix类，而后在 CSS 当中申明它就好了。

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

这将会在内容中增加一个小的 . 从视图中暗藏，从而革除浮父元素之后。这还不是全副，因为须要应用额定的代码来适应旧浏览器。

其它

如果你须要实现『文字包裹』的成果如同没有能够代替 float 浮动的计划。然而对于页面布局，前端倒退到明天，曾经呈现了更好的布局形式——Flex 布局和 Grid 布局；所以应用浮动来进行页面布局曾经不实用了，咱们在理论的开发过程当中应尽量避免应用 float 来进行页面布局。针对 float 属性的应用咱们应该回归它的实质，文本盘绕图片的；尽管咱们也能够应用 display:inline-block; 来达到同样的成果，但还是抉择 float 比拟好，毕竟这就是 float 属性设计的初衷。

参考

All about Floats

批评 float

[革除浮动的四种形式及其原理了解](

退出移动版