你说过CSS浮动到底是怎么回事吗？

说实话，我第一次接触 float，感觉像给盒子装了个“滑板”，Ke以让它在页面里滑到左边或者右边。

哈哈，别kan它名字叫“浮动”，其实它就是让元素脱离正常文档流，让后面的内容去找新位置。

一开始我以为 float 就是把元素往外搬走，然后再自动回到原来的位置。

不对不对，其实它只是在水平方向上移动，而垂直方向还是跟随文档流。

所以当你把一个块级元素设置为 float:left 时它会跟随前面的内容往左靠，而后面的块级元素则会被挤到下一行。

BFC 的出现，是为了给浮动提供一个独立的渲染环境。这样子，就不会让父容器的高度塌陷，也Neng避免 margin 重叠问题。

我记得有一次写个两列布局，直接把父容器设成 overflow:hidden，这样就变成了 BFC。结果父容器就Neng撑起两个子元素的高度。

害，我一时没想好，这种方法虽然Neng解决高度问题，却也隐藏了溢出的内容，不太好用。

当你需要在后面继续排布其他内容时必须要清除浮动，否则这些内容会被浮动元素遮住。

常见Zuo法有三种：1、给后面插空盒子；2、使用 clear 属性；3、利用伪元素 ::after 来撑起父容器。

/* 伪元素清除 */
.parent::after {
    content: '';
    display: block;
    clear: both;
}

BFC 并不是专门用来清除 float 的，但它却拥有同样的效果。只要给一个块级元素加上 overflow:auto 或 hidden，就Neng让它成为 BFC 容器，从而解决高度塌陷的问题。

这个问题可真烦人。说实话，有时候页面本身就没有被爬虫抓到，或者 robots.txt 阻止了抓取，再或者页面没有足够的内部链接导致权重不足。百度不收录，一般原因有：

Noindex 标记或 meta robots=none;

Sitemap 缺失或提交错误;

Pogo-sticking导致低质量评估;

A1

A2

A3

图片漂过去了文字却留在下面kan似重叠其實不是呀！
Ru果想让 p 在图片下面完全展开，需要给 p 加 clear=both 或者使用 BFC 

1、Ru果你想让某个 div 自动撑开高度，同时又想保持内部 float 元素可见，Ke以使用 display:inline-block 并配合 vertical-align：top; 这时候 div 不再是标准块级，而是与行内盒子一样处理，从而兼顾宽高和可视性。

- 我经常先写一个空白占位符，然后再放置真正内容；这样Ke以快速kan到布局效果。——但别忘了删掉占位符，否则会多出多余空间！

Ru果你在写博客的时候发现页面没有被搜索引擎收录，请先检查一下： - 页面是否设置了 noindex； - sitemap.xml 是否正确； - 内链是否足够。 对于大多数开发者来说只要保证以上几点基本 OK，就Neng顺利被索引。 小结：BFC 和 clear dou是解决浮动后高差异问题的重要工具，但别忘了先把页面整体结构搞清楚，再跑代码。 说实话，用这些技巧确实省下不少时间，也让我在项目里geng自信地处理复杂布局。 ————