2021-06-02

最新推荐文章于 2021-09-17 14:38:38 发布

原创最新推荐文章于 2021-09-17 14:38:38 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

笔记专栏收录该内容

20 篇文章

订阅专栏

博客围绕CSS浮动布局展开，介绍了文档流，包括正常文档流中块元素和行内元素的排列方式，以及脱离文档流的情况。阐述了浮动是CSS布局利器，可灵活定位页面元素。还提到浮动会影响周围元素，可使用clear清除浮动，并通过实例说明清除浮动能解决相关问题。

浮动布局

文档流

正常文档流：在正常文档流中，块元素独占一行，行内元素从左到右排列。

脱离文档流：设置浮动、设置定位。

浮动

浮动是CSS布局的最佳利器，可以通过浮动元素来灵活定位页面元素，以达到网页布局目的。

float属性取值
属性值	说明
left	元素向左浮动
right	元素向右浮动

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#father{
			width: 300px;
			background-color: #0C6A9D;
			border: 1px solid silver;
		}
		#father div{
			padding: 10px;
			margin: 15px;
		}
		#son1{
			background-color: hotpink;
			float: right;
		}
		#son2{
			background-color: #FCD568;
			float: left;
		}
	</style>
</head>
<body>
	<div id="father">
		<div id="son1">box1</div>
		<div id="son2">box2</div>
	</div>

</body>
</html>

box2和box1分别设置了左右浮动，宽度不会延伸，而是由内容决定宽度，若下一个元素未设置浮动，则会紧贴该元素。

清除浮动

浮动会影响周围元素，并且会引发许多问题，可以使用clear来清楚浮动。

clear属性取值
属性值	说明
left	清楚左浮动
right	清楚右浮动
both	同时清楚左浮动和右浮动

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#father{
			width: 300px;
			background-color: #0C6A9D;
			border: 1px solid silver;
		}
		#father div{
			padding: 10px;
			margin: 15px;
		}
		#son1{
			background-color: hotpink;
			float: right;
		}
		#son2{
			background-color: #FCD568;
			float: left;
		}
		.clear{clear: both;}
	</style>
</head>
<body>
	<div id="father">
		<div id="son1">box1</div>
		<div id="son2">box2</div>
		<div class="clear"></div>
	</div>

</body>
</html>

上面对son1和son2设置浮动后，父元素变成了一条线，在清楚浮动后问题得到解决。

课后习题

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	#father{
		width: 820px;
		height: 620px;
		border: solid 1px;
	}
	#div1{
		width: 800px;
		height: 100px;
		background: #00ffff;
		margin: 10px;

	}
	#div2{
		width: 595px;
		height: 380px;
		float: left;
		margin-left: 10px;
		background-color: #0000ff;
	}
	#div3{
		width: 195px;
		height: 380px;
	
		float: right;
		margin-left: 10px;
		margin-right: 10px;
		background-color: #0000ff;

	}
	.clear{clear: both;}
	#div4{
		width: 800px;
		height: 100px;
		margin: 10px;
		background-color: #C2C3E5;
	}

		
	</style>
</head>
<body>
	<div id="father">
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
		<div class="clear"></div>
		<div id="div4"></div>
	</div>
	
</body>
</html>