前端问题(一) 清除浮动

原创已于 2022-02-24 09:44:39 修改 · 297 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

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

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

1 篇文章

订阅专栏

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

浮动

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

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

清除浮动方法

额外标签法
子元素添加额外标签
```
   .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;
  	}