css清除浮动（CSS 清除浮动）

在元素设置浮动（float）后             ，该元素就会脱离文档流
  
 
  
 
  
 
  
 
  
 
  
 
，并且向左或向右浮动











，直至它的外边缘遇到包含框或者另一个浮动框的边缘
  
  
  
  
  
  。

一
  
  
  
  
  
  、浮动元素对布局的影响

1.1  
  
  
  
  
  
 、浮动元素造成父元素的高度塌陷：

原来的父元素高度是内部元素撑开的 
  
  
  
  
  
  ，但是当内部元素浮动后
  
  
  
  
  
  
，脱离文档流浮动起来
 


 


 


 


 


 

，那父元素的高度就坍塌 
 
 
 
 
 
 ，变为高度 0px  
  
  
  
  
  
 。

<style> .container { border: 1px solid blue; } .box { width: 100px; height: 100px; margin: 10px; background-color: red; float: left; } </style> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>

上述代码中 container 元素的高度将会是 0px
 


 


 


 


 


 


。

1.2
 


 


 


 


 


 


、浮动元素对邻近非浮动元素造成影响：

<style> .container { border: 1px solid blue; } .box0 { width: 100px; height: 100px; margin: 10px; background-color: red; float: left; } .box1 { width: 200px; height: 200px; background-color: green; } </style> <div class="container"> <div class="box0"></div> <div class="box0"></div> <div class="box0"></div> <div class="box1"></div> </div>

上述代码中 box1 的位置受到前面元素浮动的影响
   
   
   
   
   
   
，而且不管 box1 是在 container 里面还是外面都会受到影响
 
 
 
 
 
 。

二
 
 
 
 
 
 、清除浮动（解决浮动元素影响邻近非浮动元素问题）

CSS 清除浮动是指在使用浮动布局时
 

 

 

 

 

 
，解决浮动元素对非浮动元素的影响的问题   
   
   
   
   
   
 。

当元素设置为浮动时 

 

 

 

 

 

 ，它会从文档流中“漂浮             ”出来            ，不再占据原来的空间

 
 

 
 

 
 

 
 

 
 

 
 
，导致后面的元素不能正确地换行显示
 

 

 

 

 

 

。为了解决这个问题











，需要使用清除浮动的方法

 

 

 

 

 

 。

常见的清除浮动方法有以下几种：

1   
   
   
   
   
   
 、在浮动元素后添加一个空的容器                   ，并给该容器设置 clear 属性：

<div> <div>...</div> <div>...</div> <div></div> </div>

2
 

 

 

 

 

 

、给父元素设置 overflow 属性：

<div>...</div>

3

 

 

 

 

 

 、使用伪元素：

.clearfix::after { content: ""; display: table; clear: both; }

将以上代码添加到需要清除浮动的元素的 CSS 中
 
 
 
 
 
 
 
 
 
 
 
 
，并在 HTML 中将该元素的 class 设置为 clearfix             。这样

















，就可以通过使用伪元素清除浮动了
 
 

 
 

 
 

 
 

 
 

 
 

。

4             、使用 CSS flex 布局：

在使用 CSS flex 布局时             ，父元素默认会包含所有的子元素
  
 
  
 
  
 
  
 
  
 
  
 
，因此不需要进行清除浮动











。

<div> <div>...</div> <div>...</div> </div>

5
 
 

 
 

 
 

 
 

 
 

 
 

、使用 CSS grid 布局：

在使用 CSS grid 布局时











，父元素默认会包含所有的子元素 
  
  
  
  
  
  ，因此不需要进行清除浮动                   。

<div> <div>...</div> <div>...</div> </div>

上是 CSS 清除浮动的常见方法
  
  
  
  
  
  
，需要根据具体的使用场景和需求来选择最适合的方法 
 
 
 
 
 
 
 
 
 
 
 
。

三











、解决浮动元素造成父元素高度塌陷问题

在开发过程中
 


 


 


 


 


 

，有时需要解决浮动元素对父元素高度的影响 
 
 
 
 
 
 ，这时也可以使用以下方法解决：

1                   、使用绝对定位：

通过将浮动元素设置为绝对定位
   
   
   
   
   
   
，可以避免浮动元素对父元素高度的影响


















。

<div> <div>...</div> <div>...</div> </div>

2 
 
 
 
 
 
 
 
 
 
 
 
、使用 table 布局：

通过将父元素设置为表格布局
 

 

 

 

 

 
，可以避免浮动元素对父元素高度的影响            。

<div> <div>...</div> <div>...</div> </div>

这些方法可以帮助解决浮动元素对父元素高度的影响问题 

 

 

 

 

 

 ，但是需要根据具体的使用场景和需求来选择最适合的方法  
 
  
 
  
 
  
 
  
 
  
 
 。