浅谈CSS浮动及其清除方法

前言

     在HTML中，浮动（float）是一个CSS属性，主要用于布局和排版。它允许一个元素向左或向右移动，直到其外边距触碰到包含它的父元素的边界或其他浮动元素的外边距。那么本文将会为大家分享一些浮动有趣的知识点！

浮动实现

     实现浮动方法，我们使用css中的float属性设置属性

float一共可以设置5个不同的浮动效果，一般使用居多的都是使用左右浮动。

这里我们给img添加一个左浮动的效果，让文字出现在其右侧，实现文字环绕效果

 

三个不在同一排的li我们如何让其并排呢，这里我们也可以使用float让可以让块级元素水平排列

 

 

清除浮动        

     清除浮动（clearing floats）是在网页布局中常见的需求，尤其是在使用CSS的float属性时。当元素被设置为浮动时，它们会从正常的文档流中移出，可能会影响其他元素的位置和页面的整体布局。清除浮动可以帮助解决这些问题，确保布局正确显示。

 

这里我们给item设置了浮动，但是我们们没有给title设置浮动，所以本来效果应该是这样的        

父元素的高度为0,我们手动设置父元素高度，就等效于我们把title撑到下面去了。

第二种:借助伪元素::after 清除浮动

我们在ul中添加一个空字符的子元素，并使用clear清除浮动

 

第三种:把父容器设置成 BFC 容器

 

我们把父容器变成一个BFC容器，也可以清除浮动

 

第四种:给后面受影响的元素设置 clear:both

 

我们直接给受影响的元素，使用clear清除浮动,clear可以接受left,right,both,分别表示清除左浮动，清除右浮动，左右浮动都清除。

BFC容器

     BFC（Block Formatting Context，块级格式化上下文）是CSS中一个重要的概念，它定义了一个独立的渲染区域，这个区域内的元素布局遵循特定的规则，并且不受外部元素的影响。

首先我们来看一个很有趣的现象叫做'margin重叠'

我们给warp设置了margin-top:100px以及它的子元素box也设置了margin-top:50px,按照计算父元素加子元素的margin-top的值会有150px,但是这里只有100px,所以这里发生的'margin重叠'。

如何解决'margin重叠'

     处理'margin重叠'，我们直接把父容器设置为BFC容器即可
父容器不设置BFC

父容器设置BFC

 

这样我们就肉眼可见的去除了'margin重叠',那么如何把父容器设置成BFC容器呢？这里我列举了一些比较常用的css属性触发BFC 

# 触发BFC
1.overflwo:hidden || auto || scroll || overlay
2.position:absolute || fixed
3.float:left || right
4.display:inline-block || table-cell || cell || table-xxx
6.display:flex || inline-flex 

原文：https://juejin.cn/post/7392244532615413797