关于浮动

文字环绕效果

display : inline-block/table-cell/... position: absolute/fixed/sticky overflow:hidden/scroll

display:none position:absolute/fixed sticky

HTML的嵌套关系如下

div > img
p

原理解析： 1、给img加float:left 2、img被包裹（inline-block被破坏），并向左靠 2、div的高度塌陷

3、p元素的内容得以环绕img

四、清除浮动

• 利用clear
• BFC(IE8+、高级浏览器) / haslayout(IE6、7)
• HTML block水平元素底部走起
• CSS after 伪元素底部生成 .clearfix:after{}
  关于clear的三个值

凡是clear:left或者clear:right起作用的地方，一定可以使用clear:both替换！原因在于，clear属性是让自身不能和前面的浮动元素相邻，注意这里“前面的”3个字，而float属性要么就left要么就right，不可能同时存在。由于clear属性对“后面的”浮动元素不闻不问，因此，当clear:left有效的时候，clear:right必定无效，也就是此时clear:left等同于设置clear:both，反之亦然。所以，clear:left和clear:right这两个声明就没有任何使用的价值，至少在CSS世界中是如此，直接使用clear:both吧。

----------------------转自 张鑫旭 的 准确理解CSS clear:left/right的含义及实际用途

通过伪元素使用clear值

.clearfix:after{ content:""; display:table; clear:both
}

4.2 BFC(IE8+、高级浏览器) / haslayout(IE6、7)

4.2.1 关于BFC的介绍
Block Format Content

简单来说,BFC有三个特性

• BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
• BFC不会重叠浮动元素
• BFC可以包含浮动
  设置方式：

float:left/right; position:absolute/fixed; overflow:hidden/scroll(IE7+); display:inline-block/table-cell(IE8+);

4.2.2 关于hasLayout
在IE6、7内有个hasLayout的概念，当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸设置和定位。我们可以利用这点儿在IE6、7下完成清浮动。

设置方式：

width/height/zoom:1/..(IE6/IE7)

4.2.3 靠谱的解决方案

在IE+、现代浏览器上使用伪元素
在IE6、7使用hasLayout

现在常用的方式：

.floatfix{ *zoom:1;
}
.floatfix:after{ content:""; display:table|block; clear:both;
}

此方案来自以下文章
The very latest clearfix reloaded
A new micro clearfix hack

五：浮动的应用

两栏自适应布局
三栏布局

5.1 两栏自适应布局

float:left|right; display：table-cell; IE8+ display: inline-block; IE7

5.2 三栏布局

.left{ background:pink; float: left; width:180px; } .right{ background:lightblue; width:180px; float:right; } .center{ background:lightyellow; overflow:hidden; height:116px; }

其余参考链接
CSS float浮动的深入研究、详解及拓展(一)
CSS float浮动的深入研究、详解及拓展(二)
CSS清浮动处理（Clear与BFC）
BFC（块级格式上下文）

关于浮动