如何清除浮动

旧城等待， 2023-06-28 04:55 1阅读 0赞

浮动的原理，是元素脱标不占位，类似于水中的物体浮动到表面，那么何时在网页布局中何时需要清除浮动呢？

**时机（原因）：**

父元素（这里指的的div盒子）没有指定高度，并且子元素全部都设置了浮动，造成了脱标，此时父元素没有高度成为了一个线，父元素后边的元素会顶到元素后，给我们的主观感受就是在浮动的子元素下边，这个时候就是会造成布局混乱，此时我们需要清除浮动。

下面看一个例子：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style type="text/css" >
    		* {
    			margin: 0;
    			padding: 0;
    		}
    
    		.content {
    			width: 200px;
    			height: 200px;
    			background-color: pink;
    		}
    
    		.fl_content {
    			float: left;
    			width: 200px;
    			height: 100px;
    			background-color: red;
    		}
    
    		.footer {
    			width: 220px;
    			height: 150px;
    			background-color: yellowgreen;
    		}
    	</style>
    </head>
    <body>
    
    	<div class="content">
    		<div class="fl_content"></div>
    	</div>
    
    	<div class="footer"></div>
    	
    </body>
    </html>

此时是父元素也就是父盒子有高度，此时子元素设置了浮动，父元素后的footer元素的位置是没问题的，但是如果此时我们将父元素的高度去掉，再看下效果：

![20200107155507110.png][]

改动代码：

.content {
    			width: 200px;
    			/* height: 200px; */
    			background-color: pink;
    		}

此时发现，父盒子中的子盒子还在原来的位置，但是父盒子后的footer盒子跑到了上边，这个原因就是父元素没有高度，子元素浮动了，脱标不占位置，导致父元素此时只是看不见一条线。

下面来说解决的办法：

有以下几种方法：

1. 添加标签法 （不推荐）

该方法是在最后一个浮动的子盒子后面添加一个标签，给其设置clear:both属性

.clear {
    			clear: both;
    		}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk_size_16_color_FFFFFF_t_70 1][]

此时浏览器查看效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk_size_16_color_FFFFFF_t_70 2][]

不推荐理由：添加无意义标签，语义性不强。

2. 父元素添加overflo:hidden （不推荐）

.content {
    			width: 200px;
    			/* height: 200px; */
    			background-color: pink;
    			overflow: hidden;
    		}

不推荐理由：如果盒子中的元素有溢出，溢出的部分将无法显示

3. 伪元素清除浮动

.clearfix:after{
    	        content: "";
    	        display: block;
    	        height: 0;
    	        clear:both;
    	        visibility: hidden;
        	}
    	    /* 兼容IE */
    	    .clearfix{
    	        zoom: 1;
    		}

这种方法推荐使用。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200107155420215.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk,size_16,color_FFFFFF,t_70
[20200107155507110.png]: https://img-blog.csdnimg.cn/20200107155507110.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200107160148510.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200107160226360.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk,size_16,color_FFFFFF,t_70