HTML元素怎么设置浮动效果_HTML元素浮动的CSS属性及清除方法

嘿，我当时为此遇到了很多麻烦。
如果你问我关于浮动 HTML，你就必须谈谈我 1 4 年为一家小公司构建网站的经验。

当时老板说我们应该图文混排，左边是广告横幅，右边是文章。
我觉得只要在左边的div上加上float:left，右边p标签的内容自然就会向右移动，完美！
结果如何？我在后面添加了一个导航栏。
我本来想让它填满整个底部，但结果发现导航栏直接附着在图像的底部，高度完全丢失了！当时我就很困惑，查了半天，哈哈，原来是父div的高度塌了。
可惜的是，漂浮的孩子并不占据与父亲相同的高度。
我记得div边框是裸露的，非常难看。

然后我尝试了几种方法。
一种是在父 div 的末尾添加一个空 div，需要明确的是：两者都是。
看起来好像已经解决了，但是感觉很奇怪，HTML结构乱了，感觉没有安全感。

然后老大教了我一招，用伪元素。
在父div中添加一个类并编写 .clearfix::after { content: '';显示：块；明确：两者；在 CSS 中。
这样就不需要添加额外的标签，代码看起来更清晰。
我已经使用这个方法很多年了，效果非常好。

还有另一种设置溢出的方法：隐藏父容器。
我对此有点谨慎，因为我担心如果内容太多并且被裁剪的话，看起来会不太好。
后来我发现display:flow-root就是专门为此设计的，没有副作用。
这个现在比较常用。

不过说实话，现在我在做一个新项目，我基本上不需要漂浮了。
现在我们都用Flexbox或者Grid，灵活多了。
对齐、间距等都可以精确完成。
浮动现在仅偶尔用于旧代码维护或特殊效果。

能问清楚吗？这其中的细节非常多，一不小心就会出现问题。

html5和css篇有关浮动以及如何清除浮动

上周 我的那个朋友 让我告诉你关于邮轮的事情。

2 02 3 3 月5 日 北京
浮动的是block div。

Float：left表示向左。
float：right的意思是向右。

清晰：两者都是清晰的等级。

我试过了。
代码是这样写的。

.box1 { 浮动：左； 宽度：2 00px； 高度：3 00px； 背景：f00； }
.box2 { 浮动：右； 宽度：2 00px； 高度：3 00px； 背景：0f0； }
.清除{ 显然：两者； }
同样如此。

效果是左右移动。

绝对定位和相对定位 合计使用。

具体细节你必须亲自尝试。
没关系。