张鑫旭的CSS深入理解之float浮动学习笔记

float的历史

float为产生文字环绕效果而生

float的特性 — 包裹和破坏

包裹：即产生一个Bfc
破坏：使父容器塌陷，元素脱离文档流，产生inline boxes环绕

清除浮动

方式一：使用clear，类似于产生一个连接索道，使前文和后文关联，会产生margin重叠效果。

• clear: both，这个元素和源码中后面的元素将不浮动
• 非浮动元素和浮动元素之间不能通过外边距撑开距离
• 因此需要一个单独的非浮动元素充当索道

方式二：父容器BFC或者haslayout(IE6/IE7) - 封闭容器，不会产生margin重叠

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /*IE6, IE7产生haslayout*/
}

float的表现

元素block化：inline元素被block化
去空格化，空格符成为环绕文本

浮动与流体布局应用

文字环绕效果
https://codepen.io/curlywater...点击预览

左中右效果
https://codepen.io/curlywater...点击预览

单侧固定
https://codepen.io/curlywater...点击预览

DOM与显示位置匹配的单侧固定
https://codepen.io/curlywater...点击预览
第一种实现方式，保证向右浮动的元素写在前（先布局），内容区设置margin-right
第二种实现方式，为了使DOM和现实顺序一致，对内容区加一个向左浮动的盒子，没有指定宽度的盒子利用外边距保留剩余空间，实现宽度拉伸。使用负margin把左浮动的头像区移动到同行。

两侧自适应
https://codepen.io/curlywater...点击预览
使用table-cell产生一个BFC，去除掉浮动的影响

总结

浮动起源于实现文字环绕效果。

为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动，元素周围的内容转换为inline boxes围绕元素排列。

从浮动的起因和浮动的实现后果来看，浮动不适合用于大范围的布局，更适合利用其特性实现一些小范围的流体布局效果。