css清除浮动常见方法

#处女作
作为一名前端，虽然做了3年了但是一直没有写过自己的博客，今天来尝试一下希望得到大家的支持，如果喜欢可以点个赞哦。

默认情况：

通常情况下子级div在浮动的情况下，会对父级的div后面的元素布局产生影响，因为div在浮动的情况下，会脱离正常的文档流导致父级的盒子不能被撑起。这样父级的高度就可能是0，会影响整个布局。代码和效果如下：
代码：

<style>
	.parent{
		width:500px;
	}
	.float{
		width:50%;
		float:left;
		height:200px;
		color:red;
	}
	.foot{
		width:700px;
		color:blue;
	}
	
</style>
<div class="parent">
<div class="float"></div>
<div class="float"></div>
</div>
<div class="foot"></div>

效果：

可见由于子级div浮动导致父级div高度为0，而后面的div就会紧跟在父亲级而得不到自己想要的效果，那么，怎么解决呢，我总结了几种常见的方法。如下：

1.设置父级的高度

我们可以设置父级div的高度大于或等于子级的高度，这样就不会对后面的元素产生影响了。代码效果如下：
代码：

<style>
	.parent{
		width:500px;
		height：200px;
	}
	.float{
		width:50%;
		float:left;
		height:200px;
		color:red;
	}
	.foot{
		width:700px;
		color:blue;
	}
	
</style>
<div class="parent">
<div class="float"></div>
<div class="float"></div>
</div>
<div class="foot"></div>

效果：

2. 在浮动元素后面是用clear：both

这里有两种用法：一种是在浮动元素添加div，然后设置style=“clear：both;”，
另一种在父级div后面使用after伪类然后设置clear：both。如下
例子：添加div情况
代码：

<style>
	.parent{
		width:500px;
	}
	.float{
		width:50%;
		float:left;
		height:200px;
		color:red;
	}
	.foot{
		width:700px;
		color:blue;
	}
	
</style>
<div class="parent">
<div class="float"></div>
<div class="float"></div>
<div style="clear:both"></div>
</div>
<div class="foot"></div>

效果：

例子：使用：after伪类指定插入内容

<style>
	.parent{
		width:500px;
	}
	.parent::after{
		clear:both;/*清除所有浮动*/
		content:'',/*不可缺少，指定插入内容*/
		display:block;/*不可缺少，元素需要为块状*/
	}
	.float{
		width:50%;
		float:left;
		height:200px;
		color:red;
	}
	.foot{
		width:700px;
		color:blue;
	}
	
</style>
<div class="parent">
<div class="float"></div>
<div class="float"></div>
</div>
<div class="foot"></div>

效果如下：

3. 设置父级div overflow：hidden或者auto

在div设置为overflow：hidden或者auto的时候，子级div会默认填充父级div，这样父亲div就会别撑起来了。
代码：

<style>
            .parent{
                width:100%;
                overflow: auto;/*或者设置为hidden*
            }
            /* .parent::after{
                clear: both;
                content: '';
                display: block;
            } */
            .float{
                width:40%;
                float:left;
                height:200px;
                margin-left: 20px;
                background:red;
            }
            .float::after{
                clear: both;
            }
            .foot{
                width:100%;
                height: 300px;
                background:blue;
            }
            
        </style>
        <div class="parent">
		<div class="float"></div>
		<div class="float"></div>
		</div>
		<div class="foot"></div>

效果：

4.设置所有元素浮动

原理：设置所有元素都浮动，这样所有的元素都成为一体，就不会出现父级div盒子不能被撑起的问题
代码

在这里插入代码片 <style>
            .parent{
                width:100%;
                float: left;
            }
            /* .parent::after{
                clear: both;
                content: '';
                display: block;
            } */
            .float{
                width:40%;
                float:left;
                height:200px;
                margin-left: 20px;
                background:red;
            }
            .float::after{
                clear: both;
            }
            .foot{
                width:100%;
                height: 300px;
                float: left;
                background:blue;
            }
            
        </style>
         <div class="parent">
        <div class="float"></div>
        <div class="float"></div>
        </div>
        <div class="foot"></div>

效果：
好了，今天就分享到这里，熬夜写道现在不容易，希望对大家有所帮助。