web前端入门到实战：网站开发清除浮动的4种方式

最新推荐文章于 2024-06-08 12:52:46 发布

魔方编程

最新推荐文章于 2024-06-08 12:52:46 发布

阅读量168

点赞数

文章标签：网站开发 web前端前端 css 网页制作

本文链接：https://blog.csdn.net/wewfdf/article/details/100662063

版权

清除浮动：根据情况需要来清楚浮动。清除浮动的目的：就是为了解决父盒子高度为0 的问题。

1.、额外标签法给浮动盒子的后面添加一个新的div

2、overflow:hidden 触发了bfc模式，就不用清除浮动了 bfc模式。

CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC：

根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

3、伪元素网易搜狐常用

.clearfix:after{
      content:””;
      visibility:hidden; 
      display:block;
      height:0;
      clear:both;
 }
.clearfix{  //IE6模式下
  zoom:1;
}

清除浮动：真正的叫法闭合浮动

对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，工作第六个年头了，与大家分享一些学习方法，实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。都是一群有梦想的人，我们可能在不同的城市，但我们会一起结伴同行前端前端前端

4、双伪元素小米，淘宝常用

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			.father {
				width: 600px;
				height: auto;
				border: 1px solid red;
			}
			.child1,.child2 {
				background: pink;
				width: 250px;
				height: 250px;
				float: left;
			}
			.clearfix:before,.clearfix:after {
				/真正意义上的闭合浮动/ display: table;
				content: "";
			}
			.clearfix:after {
				clear: both;
			}
			.clearfix {
				//IE6
				zoom: 1;
			}
		</style>
	</head>

	<body>
		<div>
			<div>哥哥</div>
			<div>妹妹</div>
		</div>
	</body>
</html>
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）