前端问题(一) 清除浮动

zzz_strive

已于 2022-02-24 09:44:39 修改

阅读量284

点赞数

CC 4.0 BY-SA版权

分类专栏：前端(布局) 文章标签： css

于 2022-02-24 09:33:34 首次发布

本文链接：https://blog.youkuaiyun.com/zzz_strive/article/details/123104560

前端(布局) 专栏收录该内容

1 篇文章

订阅专栏

浮动是Web布局中常见的技术，但会导致父元素高度塌陷，影响后续元素布局。为解决这一问题，可以使用额外标签法、设置父元素overflow为hidden或使用clearfix类来清除浮动。这些方法能确保父元素包裹住浮动的子元素，并保持正常页面流。了解并掌握这些技巧对于前端开发者至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浮动

为什么要清除浮动，浮动会带来什么影响

在父元素没指定高度，且子元素浮动情况下，父元素不占有位置，下边的块级元素会与当前子元素成为一行,从而占有当前块

清除浮动方法

额外标签法
子元素添加额外标签
```
   .clear {
   	clear: both;
   }
```
给父级添加 overflow

    overflow: hidden;

父级元素添加after伪元素

  	/*声明清除浮动的样式*/
  	.clearfix:after {
  		content: "";
  		display: block;
  		height: 0;
  		visibility: hidden;
  		clear: both;
  	}
  	.clearfix {
  		*zoom: 1;  /*ie6,7 专门清除浮动的样式*/
  	}

父级添加双伪元素

	/*声明清除浮动的样式*/
  	.clearfix:before,
  	.clearfix:after {
  		content: "";
  		display: table;
  	}
  	.clearfix:after {
  		clear: both;
  	}
  	.clearfix {
  		*zoom: 1;
  	}