视频地址

float 设计的目的

实现文字环绕图片显示效果

清除 float 带来的影响

1. 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;
}

2. 父元素 BFC 化
   特点：不与外界联系，比如不会发生 margin 重叠

/* BFC 通常声明 */
float: left/right
position: absolute/fixed
overflow: hidden/scroll
display: inline-block/table-cell

对 float 特性滥用（使用 float 来砌砖头）

原因：

1. float 使元素 block 块状化（砖头化）
2. 破坏性造成的紧密排列特性（去空格化）—— HTML 中标签间空隙会转化为一个空格间隙、但是 float 后空格间隙会消失；如果是 实现的空格在 float 后不会消失，只是图文环绕后移动到后面了。

float 与流体布局

1. 图文环绕

/* float 元素 */
/* 后面是 inline 跟随元素 */

2. 左右各有元素，中间元素在剩余空间居中对齐

<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

3. 左侧固定，右侧自适应的流体布局

<div>
/* float: left; width: 75px */
/* margin-left/padding-left: 75px */
<div>

4. 右侧固定，左侧自适应
   可以使用上面左侧固定的方式，但是代码会将 float:right 右侧的元素写在 DOM 流的前面，有点不符合习惯，所以换一种方式。

<div class="container" style="float: left; width: 100%">
    /* 内容区域：margin-right/padding-right: 75px */
    /* 右侧固定内容：float: left; margin-left: -75px; width: 75px */
</div>

5. 左右两边都自适应
   右边可以根据左边的宽度自动填满，再也不用把左边的宽度写死了。

/* 左边元素：float: left */
/* 右边自适应内容：display: table-cell */