清除浮动的三种方法

原创已于 2022-09-11 09:20:22 修改 · 763 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #html

收录于

于 2022-09-11 09:15:24 首次发布

WEB 专栏收录该内容

22 篇文章

订阅专栏

本文探讨了浮动元素如何影响父元素布局，并提供了四种常见的清除浮动方式：1) 使用额外标签法，通过添加空`<div>`；2) 设置父元素`overflow`属性；3) 使用伪元素`::after`；4) 双伪元素法利用`::before`和`::after`。了解这些技巧有助于确保响应式布局的正确性。

1 父元素没有高度
2 子元素浮动
3 影响下面的布局时
需清除浮动

1 额外标签法
添加一个块元素

<div class="app">
  <div class="app1">手机</div>
  <div class="app2">电脑</div>
  <div class="clear" style="clear: both;"></div>  <!-- 添加一个空的标签 -->
</div>

2 给父元素添加overflow 缺点无法显示溢出的部分
overflow: hidden;
3 添加after伪元素`

.clearfix:after{
		content: '';
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix{
		/* 为 IE6、IE7浏览器设置的清除浮动 */
		*zoom: 1;
	}

4
双伪元素法

.clearfix:after,.clearfix:before{
		content: '';
		display: table;
	}
	.clearfix:after{
		clear: both;
	}
	.clearfix{
		/* 为 IE6、IE7浏览器设置的清除浮动 */
		*zoom: 1;
	}