作为前端的好孩子，总会遇到一个经典不朽的问题：有几种闭合内部浮动的方法？哈哈，是不是想说这个能难得住我？马上能列出个123：
开胃小菜，拈来尝尝
1.在最后一个浮动元素的下面添加空白标签
<div style = "clear:both"></div>or
<br clear = "all">
2.父元素overflow: hidden
IE 6不支持;一旦子元素的大小超过父容器的大小，就会出显示问题
3.父元素display: inline-block
若父元素使用
margin: 0 auto实现居中时，display: inline-block使其转为行内元素，导致居中效果无效。
4.父元素position: absolute or position: fixed(IE6不兼容);
使父元素脱离文档流，清除父元素的居中效果，且对后面的div等有类似于浮动的影响。好似关了一扇窗，却开了一道门，还是尽量不用的好。
5.父元素设置float：right or float: left
6.为父元素添加after伪类
/******IE8+或其他******/
.clearfix:after {
display: block;
content: " ";
height: 0;
overflow: hidden;
clear: both;
}
OR
.clearfix:after {
display: table;
content: " ";
clear: both;
}
/******IE6、IE7******/
.clearfix {
*zoom: 1;
}
这样就完了吗？路漫漫其修远兮！
在整理的过程中，我们应该思考一下这背后的运行原理，否则的话，这些零碎的方法依靠硬记简直是伤害脑细胞和消磨青春的利器啊~~~
硬货奉上，且行且珍惜，喝杯咖啡慢慢品
其实，这里主要应用了以下两种方法：
clear(方法1)-
IE专有的hasLayout和W3C标准下的BFC （方法2-6）
这里主要对hasLayout和BFC（毕竟也是大咖呀）展开学习。
hasLayout
- 背景：
在IE中，使用layout（布局）概念控制元素的尺寸和定位。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout），当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。 - 闭合内部浮动的原理：
通过上述背景我们了解到，当对无layout的元素触发了hasLayout，会使其对自己和子孙元素进行计算，不管子孙元素是否存在浮动。 - 触发hasLayout的方法：
position: absolute float: left|right
display: inline-block
width: any value other than 'auto'
height: any value other than 'auto'
zoom: any value other than 'normal' （IE专用属性）
writing-mode: tb-rl（IE专用属性）
overflow: hidden|scroll|auto（只对IE 7及以上版本有效）
overflow-x|-y: hidden|scroll|auto（只对IE 7及以上版本有效）
#####BFC（Block Formatting Context，块级格式化上下文）
- 背景
Block：
box(css的基本布局单位)的一种类型，由`display: block | table | list-item`控制。
Formatting context：
W3C CSS2.1 规范中的一个概念,表示页面的一个渲染区域，包含一系列渲染规则，用来控制元素及其子元素如何定位，以及与其他元素的作用关系。
BFC：
一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
- BFC渲染规则
--内部的Box会在垂直方向，一个接一个地放置。
-- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
--每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
--BFC的高度时，浮动元素也参与计算
--BFC的区域不会与float box重叠。
--BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 通过解读上述规则，可以发现，BFC除了可以解决闭合浮动的问题外，还可以解决以下问题（hasLayout巧妙使用，也可以实现）：
--闭合浮动
--同一BFC下，margin重叠问题
--两栏自适应（左定宽，右自适应）
- 触发BFC的方法（与触发hasLayout的部分差别来源于浏览器版本问题）
```css
position: absolute | fixed
float: left|right
display: inline-block | table-cell | table-caption | flex | inline-flex
overflow: hidden|scroll|auto
overflow-x|-y: hidden|scroll|auto
大概就这些了，小二，结账，下回再唠......
网友评论