关于css的浮动-float与清除

标签: float css BFC IFC
30人阅读 评论(0) 收藏 举报
分类:

CSS定位机制

可以CSS中的流分为三种:普通流、浮动流和定位流。float不为none的元素会产生浮动流漂浮于文档流智商,按照某个方向进行浮动,移动到父级元素的边界或者遇到另外一个浮动元素就会停止。

另外如果两个div元素在垂直方向上会出现外边距(margin)合并的情况,但是浮动元素不会。

浮动元素会创建包含块。浮动元素的包含块是离其最近的块级祖先元素。浮动元素会生成一个块级框,无论这个元素本身是行内元素还是块级元素。

浮动元素的危害

CSS的浮动就像是一把双刃剑,有利也有弊。在布局的时候使用到float会使得布局更加灵活,但是有时候却会导致一些危害

危害在于:

多个同级元素,前者设置了浮动,后者会自动向前填充造成重叠

子元素浮动,父元素为设置高度,造成父元素的高度坍塌

原因在于:CSS规定,用户代理可以不必重新显示已经显示的内容来适应文档中后来出现的内容,所以这就会导致重叠的出现。

如果行内框与浮动元素重叠了,行内框的背景、边框和内容都在浮动元素智商;如果与块级框的内容在浮动元素之上,而边框和背景都在其之下

如何清楚浮动

关于如何清楚浮动,个人认为可以分为两大招:添加元素和创建BFC

1. 添加clear : both, left, right

给浮动元素添加一个兄弟元素,并且将其clear设置为both。clear的工作是增加了一个清除区,在清除元素的上边距之外,不允许任何浮动元素的加入,其实它本身的外边距并没有发生变化,下移是因为增加了清除区

2. 添加br标签

利用br标签本身具有的html属性clean = all | left | right | none;来清除浮动

3. 利用伪元素

可以给浮动元素的父元素或者兄弟元素添加伪元素::after或者::before

(顺便补充一句,关于::和:,使用:来添加伪元素也是可以的,但是CSS3的规定,伪元素使用::。但是目前浏览器对两种写法都能整人处理)

parent:after{
content: ” . “;
clear: both;
display: block;
height: 0px;
visibility: hidden;
}
.clearfix {
/* 触发 hasLayout */
zoom: 1;
}
(关于hasLayout文章末尾有说明)

4. 利用触发BFC=block formatting COntexts,块级格式化上下文

因为BFC元素会产生一个独立的渲染区域,其包含的子元素的浮动不会影响的外部元素。根据BFC触发的条件,我们可以将浮动元素的父元素声明为一个BFC从而清除浮动

常见的有:

.parent {
overflow: auto;/或者visible/
zoom: 1;/在IE下触发其layout/
}
哪种好用就用哪种吧。嘻嘻

Block Formatting Context

块级格式化上下文指的是一个独立的块级渲染区域,不影响其他的元素,这个元素遵循一套自己的渲染方案。有五种方式可以来生成这样的一个块级元素

根元素或者包含根元素的元素
position不为static的元素
float不为none的元素
overflow不为visible 的元素
display为flex、inline-block、和table-cell的元素
它的布局规则是

BFC可以看成是一个页面的隔离(看作新的“html”)

内部元素会在垂直方向上排列,也就是BFC中的正常文档流(跟我们认为的HTML的文档流规则一样)
元素的垂直距离由margin决定,BFC内部元素在垂直方向上还是会出现margin重叠的现象。但是两个BFC元素不会出现外边距重叠
无论是浮动还是正常元素都不能超过这个BFC块
计算高度时候会把float元素包含进去
使用场景:

1.解决margin重叠问题:如果相邻的垂直元素同时设置了margin后,会以高的元素的margin为准

可以将其中一个元素添加一个父元素,并且让父元素生成生成一个BFC,这样两个元素处于不同的BFC中就可以解决maigin重叠问题了:

  1. 就是解决浮动问题

hashLayout

layout是IE渲染引擎内部组成的部分。在IE浏览器中,一个元素要么针对自己的内容进行组织和计算,要么依赖于包含块。所以为了协调这两种方式之间的矛盾,渲染引擎采用“haslayout”属性,属性值可以为true或者false,如果为false表示这个元素拥有一个布。

IE中有布局的元素是由自身来控制布局的,这点和BFC很像。触发haslayout就类似与触发BFC让这个元素内部的布局自成一体

Inline Fornatting Context(IFC)

内联格式化上下文。它的高度(行高)是由最大行内框高度决定的,不受到垂直方向上的padding和margin的影响。IFC中不能有块级元素,如果在IFC中插入一个块级元素会将两个IFC与div分开,每个IFC都表现为一个与块级元素并排排列

水平居中:当一个块要在环境中水平居中时候,设置设置为inline-block,其父元素的text-align设置为center,可以实现水平居中

垂直居中:创建一个IFC,然后设置vertical-align:middle,元素则可以此父元素下垂直居中

查看评论

css清除浮动float的七种常用方法总结和兼容性处理

7、万能清除法 **after伪类** 清浮动(现在**主流**方法,**推荐使用**) ``` 选择符:after{ content:"."; clear:both; ...
  • promiseCao
  • promiseCao
  • 2016-10-09 23:04:14
  • 20367

HTML5高级之css清除float浮动

我们先来回忆一下float的特征:        1)块在一排显示        2)内联支持宽高        3)默认内容撑开宽度        4)脱离文档流        5)提升层级半层 ...
  • u010297791
  • u010297791
  • 2016-11-17 09:22:55
  • 3250

CSS元素定位--浮动(float)与清楚(clear)

CSS中定位的基本思想: 定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素,又或者是相对于另一个元素,甚至相对于浏览器窗口本身的位置。 浮动 ( float ): CSS中允许对所有元...
  • shenlei19911210
  • shenlei19911210
  • 2015-09-03 18:17:29
  • 1751

浮动布局float带来的高度塌陷——清除浮动

一、清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)? 很多人都已经习惯称之为清除浮动,以前我也一直这么叫着,但是确切地来说是不准确的。我们应该用...
  • Amanat
  • Amanat
  • 2016-01-08 09:20:52
  • 5418

清除浮动最有效的css写法

说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很...
  • u012396955
  • u012396955
  • 2017-03-04 20:15:14
  • 1724

CSS浮动(float)属性的原理以及清除浮动的几种方法

浮动(float)的定义 浮动的元素可以向左或向右移动,直到它的外边框碰到父元素的边框或者其他浮动框的边框为止!(注意是其他浮动框的边框!敲黑板!) 设置为浮动的元素不在文档普通流中。 浮动的过程 第...
  • hyr_ii
  • hyr_ii
  • 2016-12-18 21:09:57
  • 395

CSS关于浮动(Float)的前世今生

一 什么是CSS Float? float 是 css 的定位属性。在传统的印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中,应用了CSS的float属性的页面元素就...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2016-06-08 09:46:47
  • 2228

关于元素的float属性以及清除浮动的总结

一直以来都
  • u010255918
  • u010255918
  • 2014-11-23 19:33:57
  • 896

css float(脱离正常流:向左/右浮动直到父元素/另一float, 不占空间)

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。...
  • tuhuolong
  • tuhuolong
  • 2013-01-01 12:23:31
  • 3216
    个人资料
    等级:
    访问量: 2948
    积分: 205
    排名: 36万+
    最新评论