清除浮動的5種方式分別是：1、使用clear屬性；2、使用overflow屬性；3、使用偽元素clearfix；4、使用flex布局；5、使用grid布局。詳細介紹：1、使用clear屬性，這是最常用的清除浮動的方法，可以在浮動元素后面添加一個元素，并為其添加“clear: both;”樣式；2、使用overflow屬性，可以為父元素設置”overflow: auto;“等等。
本教程操作系統：windows10系統、DELL G3電腦。
在CSS中，有五種主要的方式可以清除浮動，它們分別是：
1、使用clear屬性：這是最常用的清除浮動的方法。你可以在浮動元素后面添加一個元素，并為其添加clear: both;樣式。這個元素可以是實際的DOM元素，也可以是一個看不見的元素，如50f83690339e70692a38195b0ad4481416b28748ea4df4d9c2150843fecfba68。這種方法的缺點是它需要在你的HTML中添加額外的元素，這可能會影響你的布局和代碼的可讀性。
2、使用overflow屬性：你可以為父元素設置overflow: auto;或overflow: hidden;。這樣，當一個元素浮動時，它會觸發BFC（塊級格式化上下文），這會阻止浮動影響到其父元素。這種方法的優點是不需要在HTML中添加額外的元素，但缺點是它可能會影響到其他樣式（如背景和邊框的渲染）。
3、使用偽元素 clearfix：偽元素是一種在CSS中創建的元素，它不需要在HTML中添加額外的元素。你可以使用::after或::before偽元素來清除浮動。以下是一個基本的例子：
.clearfix::after {
content: "";
display: table;
clear: both;
}
登錄后復制
使用這種方法時，只需要在需要清除浮動的父元素上加上clearfix類即可。這種方法的優點是不需要在HTML中添加額外的元素，但缺點是它可能會影響到其他樣式（如背景和邊框的渲染）。
4、使用flex布局：Flex布局是一種現代的CSS布局方式，它可以自動處理元素的排列和對齊。你可以將父元素設置為flex布局，這樣即使其中的元素浮動了，也不會影響到父元素的尺寸。例如：
.parent {
display: flex;
}
登錄后復制
使用這種方法時，你不需要在HTML中添加額外的元素，也不需要使用任何清除浮動的技巧。但需要注意的是，并非所有的瀏覽器都支持flex布局。
5、使用grid布局：Grid布局是另一種現代的CSS布局方式，它可以創建復雜的二維布局。和flex布局一樣，你可以將父元素設置為grid布局，這樣即使其中的元素浮動了，也不會影響到父元素的尺寸。例如：
.parent {
display: grid;
}
登錄后復制
使用這種方法時，你不需要在HTML中添加額外的元素，也不需要使用任何清除浮動的技巧。但需要注意的是，并非所有的瀏覽器都支持grid布局。而且，grid布局比flex布局更復雜，對布局的控制也更精細。
