css布局浮动与清除

最新推荐文章于 2024-04-29 16:58:49 发布

那么天音波在滑行

最新推荐文章于 2024-04-29 16:58:49 发布

阅读量78

点赞数

本文链接：https://blog.csdn.net/weixin_43378878/article/details/96477897

版权

浮动与清除

如何让父元素围住浮动元素

父元素添加overflow：hidden
父元素添加folat
加一个空元素，给空元素加clear，添加虚拟尾元素

#div1::after{
      content:"."
      clear:both;
      visibility:hidden;
      height:0;
}

基于浮动元素的demo
三栏都是固定宽度的demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基于浮动的布局DEMO</title>
	<style>
	*{margin: 0;padding: 0;}
	div{
		width: 1000px;
		margin: 0 auto;
		background: lightgray;
		overflow: hidden;
	}
	#p1{
		width: 150px;
		height: 800px;
		background-color: red;
		float: left;
	}
	#p2{
		width: 600px;
		height: 800px;
		background-color: blue;
		float: left;
		margin-right: 10px;
	}
	#p3{
		width: 230px;
		height: 800px;
		background-color: lightblue;
		float: left;
		margin-right: 10px;
	}
</style>
</head>
<body>
	<div class="a">
		<p id="p1">p1</p>
		<p id="p2">p2</p>
		<p id="p3">p3</p>
	</div>
</body>
</html>

中间栏自适应宽度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基于浮动的布局DEMO</title>
	<style>
	*{margin: 0;padding: 0;}
	div{
		width: 100%;
		
		background: lightgray;
		overflow: hidden;
	}
	#p1{
		width: 150px;
		height: 800px;
		background-color: red;
		float: left;
	}
	#p2{
		width: auto;
		height: 800px;
		background-color: blue;
		margin-left: 160px;
		margin-right: 240px;
		
	}
	#p3{
		width: 230px;
		height: 800px;
		background-color: lightblue;
		float: right;
		
	}
</style>
</head>
<body>
	<div class="a">
		<p id="p1">p1</p>
		<p id="p3">p3</p>
		<p id="p2">p2</p>
		
	</div>
</body>
</html>

那么天音波在滑行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css布局浮动与清除

浮动与清除如何让父元素围住浮动元素父元素添加overflow：hidden父元素添加folat加一个空元素，给空元素加clear，添加虚拟尾元素#div1::after{ content:"." clear:both; visibility:hidden; height:0;}基于浮动元素的demo三栏都是固定宽度的demo&...
复制链接

扫一扫