关于css:清除浮动

42次阅读

共计 392 个字符,预计需要花费 1 分钟才能阅读完成。

1、父级增加 overflow: hidden;

给浮动元素的容器增加 overflow:hidden; 或 overflow:auto; 能够革除浮动。
在增加 overflow 后,浮动元素回到了容器层,把容器高度撑起,达到了清理浮动的成果。

<div class="news">
  <img src="news-pic.jpg" />
  <p>some text</p>
</div>
.news {
  overflow: hidden;
  *zoom: 1;
}
.news img {float: left;}
.news p {float: right;}

2、clear:both;

.clear {clear: both;}

3、CSS 的:after 伪元素

.clearfix:after{
  content: ""; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

.clearfix {zoom: 1;}

正文完
 0