三种方法消除浮动带来的影响

最新推荐文章于 2025-03-24 10:28:16 发布

ilvseyinfu

最新推荐文章于 2025-03-24 10:28:16 发布

阅读量1.2k

点赞数

分类专栏： Web

本文链接：https://blog.youkuaiyun.com/qq_31751569/article/details/77683489

版权

Web 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了三种常用的清除CSS浮动的方法：使用空标签、设置overflow属性以及利用after伪元素。每种方法都有详细的解释和示例代码，帮助读者更好地理解和掌握清除浮动的技巧。

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

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.container{
			border:1px solid red;
			/*overflow: hidden;*/
			/*
			所以，这是消除浮动的第二种方法
			给包含浮动元素的父标签添加css属性
			overflow:auto;
			
			下面我们来回顾下overflow这个属性：
			overflow这个属性规定内容溢出元素框时发生的事情
			scroll：内容会被修剪，但浏览器会显示滚动条来查看其余内容
			visible：默认值，内容不会修剪，会呈现在元素框之外
			hidden：内容会被修剪，其余内容不可见
			auto：如果内容被修剪，则浏览器会显示滚动条来查看
			inherit：规定从父元素继承overflow属性的值

			缺点：overflow如果不设置为默认值visible
			会带来对布局等等很多副作用。。
			（- 没有深入了解
			 */
		}
		img{

			width:100px;
			height: 100px;
			float: left;
		}
		p{
			float: left;
		}
		.clear{
			clear: both;
		}
		.clearfix:after{
			content:"."; /*内容就是一个英文.*/
			display:block; /*加入的这个元素转化为块级元素*/
			clear: both; /*清除左右两边的浮动*/
			visibility: hidden;/*设置为隐藏*/
			line-height: 0; /*行高0*/
			height: 0; /**/
			font-size: 0; /**/
 		}
 		/*
 		在这里我们回顾下伪类：
 		:after 选择器在被选元素的内容后面插入内容
 		:before 选择器在备选元素的前面插入内容
 		p:after{
			content:"liuyixiang";
			background-color:yellow;
 		}
		在每个p元素后面插入内容，并设置插入内容的样式
		这里是在p元素后面加了liuyixiang 背景颜色红色
 		 */
 		}
		.clearfix{*zoom:1;} /*兼容ie6/7*/
		.clearfix{display: inline-block;}/*兼容ie/mac*/
		/*
			所以，消除浮动的第三种方式
			after伪元素实现
			父元素上使用after伪元素来新加一个内容
			：after伪元素内容是一个点，本身用来清楚浮动
			其它代码则是为了让这个伪元素不可见
			这个方法还是比较常见的
		 */
		
	</style>
</head>
<body>
	<div class="container clearfix">
		<img src="a.jpg"  />
		<p>one</p>
		<!--<div class="clear"></div>-->
		<!--
			所以清除浮动的第一种方法就是
			使用空标签清楚浮动
			在所有浮动标签后面添加一个空标签并定义css属性
			clear：both;
			缺点：增加了无语义标签
		-->
	</div>
</body>
</html>