float 设计的目的
实现文字环绕图片显示效果
清除 float 带来的影响
- float 元素底部插入 clear 的 block 水平元素。
特点：与外界可以联系，比如 margin 重叠。
实现方式：
/* HTML block 水平元素走起 */
<div ...></div>
/* CSS after 伪元素底部生成 */
.clearfix:after {
content: '';
display: block;
height: 0;
overflow: hidden;
clear: both;
}
/* 或者 */
.clearfix:after {
content: '';
display: table;
clear: both;
}
- 父元素 BFC 化
特点：不与外界联系，比如不会发生 margin 重叠
/* BFC 通常声明 */
float: left/right
position: absolute/fixed
overflow: hidden/scroll
display: inline-block/table-cell
对 float 特性滥用（使用 float 来砌砖头）
原因：
- float 使元素 block 块状化（砖头化）
- 破坏性造成的紧密排列特性（去空格化）—— HTML 中标签间空隙会转化为一个空格间隙、但是 float 后空格间隙会消失；如果是 实现的空格在 float 后不会消失，只是图文环绕后移动到后面了。
float 与流体布局
- 图文环绕
/* float 元素 */
/* 后面是 inline 跟随元素 */
- 左右各有元素，中间元素在剩余空间居中对齐
<div>
<p style="float: left">左边很长很长很长很长</p>
<p style="float: right">Just Right</p>
<div style="text-align: center;">我在剩余空间居中对齐</div>
<div style="clear:both;"></div>
</div>
效果图.png
- 左侧固定，右侧自适应的流体布局
<div>
/* float: left; width: 75px */
/* margin-left/padding-left: 75px */
<div>
- 右侧固定，左侧自适应
可以使用上面左侧固定的方式，但是代码会将 float:right 右侧的元素写在 DOM 流的前面，有点不符合习惯，所以换一种方式。
<div class="container" style="float: left; width: 100%">
/* 内容区域：margin-right/padding-right: 75px */
/* 右侧固定内容：float: left; margin-left: -75px; width: 75px */
</div>
- 左右两边都自适应
右边可以根据左边的宽度自动填满，再也不用把左边的宽度写死了。
/* 左边元素：float: left */
/* 右边自适应内容：display: table-cell */
