浅谈html元素的float属性

老实说，当我第一次开始使用网页布局时，浮动属性成了我的救星。
我记得第一次使用浮动来创建水平导航菜单。
现在想起来，那种成就感一清二楚：不用写很多代码就排好了几个li元素。

有趣的是，酷浮动操作远不止这些。
我正在为客户开发混合图像和文本布局，并使用 float:right 来表示产品图像；才发现文字就在图像的正下方。
我当时急得满头大汗，后来发现必须在父元素上添加overflow:hidden才能激活BFC，将浮动元素框起来。
我自己没有运行这个。
我记得数据是2 008 年左右的，当时Flexbox刚刚出来，但是很多人还是习惯使用浮动。

说白了，float最大的错误就是父元素严重塌陷。
我有一个项目，其中包含多个浮点子元素的容器变空。
后来我使用 Clearfix hack 解决了这个问题 - 添加一个空的伪元素 ::afterclear:both;在容器中或者直接给父元素添加overflow属性。
经常使用这个技巧后，我什至可以通过触摸来判断哪里需要增加清晰度。

但是回想起来，float确实有点过时了。
最近接手了一个老项目，使用Grid进行了重构，发现布局灵活多了。
但说不能替代也不一定。
例如，对于一些较旧的浏览器兼容性要求或针对较小屏幕的特定适应，浮动可能仍然有用。
当时我不明白为什么，但后来的测试表明，一些奇怪的 Android 机器在解析 Flexbox 时遇到了困难。

代码层面其实很简单，就像你提供的例子一样。
我写注释的时候是这样写的：/运行BFC以防止父元素被清空/。
现在看来是这样的细节确实值得核心。
但好处是，一旦你理解了这一点，很多复杂的布局就可以使用这套逻辑来分离。

有趣的是，现在当新手问我布局问题时，我建议多尝试 Grid。
但每次看到有人讨论清除浮动的方法，我还是竖起大拇指——毕竟这个属性在互联网历史上有着特殊的地位。
这可能有点极端，但我认为游泳应该在每个前端老手的技能树中占有一席之地。

Html新手入门常见小问题及解决方法

流动问题在布局干扰中很常见。
子元素的宽度超过了父元素的宽度，导致错位。
解决方案：扩大父元素或缩小子元素。

父元素崩溃很常见。
浮动的高度和宽度未设置，父高度折叠。
解决方法： 1 、设置parent的高度。
2 .在child后面添加清晰的浮动元素。
3 .父集溢出：隐藏。
4 .伪元素清除。

您还可以向父级添加浮动。

自己掂量一下。

html中h1和p浮动之后为什么会掉下来

噢，是的，是的，我正在谈论这个。
除非你给元素一个固定的宽度，比如正好1 00px。
但例如外框的最大宽度只有1 2 0像素，我忘记设置宽度。
这个时候肯定会掉下来。

我记得当我第一次开始制作网页时就掉进了这个洞。
当时照片是放在div里的。
图片宽度为2 00px，但div宽度未设置。
结果，整个页面都被压缩变形了。
说实话，当时我不太明白这是为什么。
经过一番研究后，我发现我还必须决定外容器的尺寸。

最好发布您的代码，这样更容易阅读。
例如，如果您看一下这个，假设您有一个没有宽度的父 div。
里面有一个细分，宽度设置为2 00px。
这时候就需要支持child div。
它掉落是因为父 div 不适合。

看看你的，是这样吗？