前端清除浮动的方法有哪些？

最新推荐文章于 2023-07-27 21:11:42 发布

爱上猫的程序猿

最新推荐文章于 2023-07-27 21:11:42 发布

阅读量677

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/tang18533952786/article/details/128836998

版权

一、前端清除浮动的几种方式
（1）、父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

（2）父级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。
优点：简单、代码少、浏览器支持好

（3）结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

（4）设置伪类元素，定义clear：both属性

/*使用伪元素代替了html中的额外标签*/
<style>
	.clearfix::after {
   		content: "";
      	display: block;
      	clear: both;
  	 }
</style>


<body>
	<div class="head clearfix">
	  	<div class="left"></div>
	  	<div class="right"></div>
	</div>
	<div class="box"></div>
</body>

原理：这个方式的原理和额外标签法的方式异曲同工，只是利用伪类向浮动元素的父盒子的后面添加了一个块级元素
优点：代码少、兼容性好、不会有额外的标签、简单
缺点：为了兼容低版本的浏览器，需要加上zoom: 1这个属性

爱上猫的程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端清除浮动的方法有哪些？

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。原理：这个方式的原理和额外标签法的方式异曲同工，只是利用伪类向浮动元素的父盒子的后面添加了一个块级元素。原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。优点：代码少、兼容性好、不会有额外的标签、简单。一、前端清除浮动的几种方式。
复制链接

扫一扫