嘿，朋友！CSS浮动布局，你真的懂了吗？哈哈，咱就是说这玩意儿可不是随便就Neng搞定的。你以为简单点就Neng用？说实话，我跟你说这可比kan起来复杂多了。

咱们先从Zui基础的开始。记住在 CSS 世界里文档流就像是“地心引力”，所有元素dou按照它来排列。 咱就是说Ru果你想让一个元素脱离文档流，就得用浮动。

为什么百度不收录？ 这个问题有点绕。咱就是说搜索引擎抓取网页的时候会分析网页的内容和结构。Ru果你的网页结构混乱、代码质量差或者内容不符合搜索引擎的要求，那么它可Neng就不会收录。

不过别担心！咱就是说今天咱们就来聊聊CSS浮动布局，让你少走弯路。

BFC啊，这个概念听起来有点高深莫测。其实hen简单！BFC就是一个独立的渲染区域。也就是说在这个区域内的内容排版不会受到外部容器的影响。

想想kan：当你设置一个元素为 BFC 容器的时候，它内部的布局就有了自己的空间了。 这就像你给自己盖了一个小房子一样！

要创建 BFC 容器吗？那咱就是说有几种方法：

.container {
    display: flow-root;
}

这种方法比较直接明了。 你只需要把需要创建 BFC 容器的父容器设置为 `display: flow-root;` 就Ke以了。

.container {
    clear: both;
}

这是个老生常谈的方法了。 你Ke以在父容器上设置 clear: both; 来强制清除浮动的影响。

在 ::after 中必须 content: "" , Ru果没有content，伪元素压根不存在。

必须要 display: block ， 因为 ::after 默认 inline ， 而 clear 只对块级生效。

.item {
    width: 200px; /* 每列宽度 /
    height: 100px; / 每列高度 /
    float: left; / 让每个 item dou浮动到左侧 */
}

img { float: left;}

ul{ overflow: hidden;}