Web开发基础-CSS-16

最新推荐文章于 2024-08-02 18:01:26 发布

原创最新推荐文章于 2024-08-02 18:01:26 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

Web开发专栏收录该内容

108 篇文章

订阅专栏

本文通过实例演示了CSS中元素的浮动及其对页面布局的影响。介绍了如何使用clear属性来清除浮动，防止元素受到前面浮动元素的影响，并展示了如何通过在父元素内部添加一个空的div并清除其浮动来解决父元素高度塌陷的问题。

CSS中元素位置浮动的处理——续：

基础概念介绍：

如何消除浮动的影响：

案例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素浮动</title>
		<style type="text/css">
			#d0,p {
				width:450px;
				border:1px solid #000;
			}
			#d0>div {
				width:100px;
				height:100px;
				margin:10px;
			}
			#d1 {
				background-color: red;
			}
			#d2 {
				background-color: green;
			}
			#d3 {
				background-color: blue;
			}
			/* 浮动 */
			/* #d1,#d2,#d3 {
				float:right;
			} */
			
			/* 浮动 */
			#d1,#d2,#d3 {
				float:left;
			}
			


		</style>
	</head>
	<body>
		<div id="d0">
			<div id="d1"></div>
			<div id="d2"></div>
			<div id="d3"></div>
			
		</div>
		<p>浮动时看看我的位置</p>
	</body>
</html>

最终页面效果

p元素受到了浮动的影响与浮动的几个div层叠在一起。

消除左浮动：可添加如下样式代码

/*消除浮动影响(叔叔)*/
			 p {
				 clear: left; 
			}

修改后页面效果：

P元素不受浮动影响了，但浮动元素的父元素仍受影响。

如何解决呢？添加如下代码：添加一个空的div，并清除它的浮动即可

代码如下：

	<body>
		<div id="d0">
			<div id="d1"></div>
			<div id="d2"></div>
			<div id="d3"></div>
			<div id="d4"></div><!-- 添加一个空div -->
		</div>
		<p>浮动时看看我的位置</p>
	</body>

/* 消除浮动影响（父亲） */
			#d0>#d4 {
				width:0;
				height:0;
				clear:left;
			}

这样修改后页面效果：