欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Web前端开发——CSS布局与定位之浮动定位

程序员文章站 2022-03-29 14:52:52
...

目录

1. 内容

2. float

2.1 float用处

2.2 float属性特点

3. clear

3.1 clear属性

3.2 应用

3.2.1 单方向清除浮动的用法

3.2.2 页脚清除浮动用法

4. 案例

1. 内容

Web前端开发——CSS布局与定位之浮动定位

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        *{
            margin: 10px auto;
            padding: 0;
        }
       div{
           height: 100px;
           width: 100px;
           border: 2px solid red;
       }
    </style>
</head>

<body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
</body>
</html>

Web前端开发——CSS布局与定位之浮动定位

  可以看到，在没用float属性之前，div标签单独占据一行，在div{}中加入：float: left;

Web前端开发——CSS布局与定位之浮动定位

可以看到两个盒子都向左浮动，都处在同一行，box1和box2脱离了文档流原来位置

2. float

2.1 float用处

Web前端开发——CSS布局与定位之浮动定位

 

第一个它的应用就是在图文混排的时候，如果你希望图片位于文字的左侧或者右侧，那我们就把这个图片设置成float的属性是left或者righ就可以了；
第二种是在做分列布局时比如要分成两列，一个向左一个向右就能达到效果，当然同时向左或同时向右也是可以的，如果是三列，同时向左或向右即可。

2.2 float属性特点

Web前端开发——CSS布局与定位之浮动定位

 三个div标签做出来的盒子，默认情况下是独占一行，它们体现出了block类型元素的特点，现在我们设置浮动，

第一个特点就是如果第一个盒子box1向右浮动的话，它会脱离文档流，由于它已经脱离了文档流，所以它原来的位置将会被box2占据，这个是当我们设定浮动之后，原有的位置会丢失，其他的元素会占据这个空白的位置

Web前端开发——CSS布局与定位之浮动定位

三个盒子向左浮动且宽度够用的情况，那么这三个盒子就可以水平的排列

Web前端开发——CSS布局与定位之浮动定位

对于左边的图，三个盒子均向左浮动，box1, box2占据了第一行，第一行不够宽度给box3显示，因此bos3会跳转到第三行来进行显示；

对于右边的图，三个盒子均向左浮动，且boxi1较高，且box2比较矮，由于box1叉占据了这个位置，box3向左移动填这个空位的时候，那么box3就卡在这个空位的位置.

3. clear

3.1 clear属性

Web前端开发——CSS布局与定位之浮动定位

3.2 应用

3.2.1 单方向清除浮动的用法

Web前端开发——CSS布局与定位之浮动定位

Web前端开发——CSS布局与定位之浮动定位
box2未清除前
Web前端开发——CSS布局与定位之浮动定位
清除后

测试时仅box2清除右边有效，box1清除左边无效 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        *{
            margin: 10px auto;
            padding: 0;
        }
       div{
           height: 100px;
           width: 100px;
           border: 2px solid red;
           float: right;
       }
       #box2{
           clear:right;
       }
    </style>
</head>

<body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
</body>
</html>

3.2.2 页脚清除浮动用法

Web前端开发——CSS布局与定位之浮动定位

 

Web前端开发——CSS布局与定位之浮动定位

 

4. 案例

<!DOCTYPE html >
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>clear both</title>
	<style>
		* {
			padding:0px;
			margin:0px;
		}
		#container{
			/*height: 700px;*/
			width: 1000px;
			/*background-color: deepskyblue;*/
			margin: 0 auto;
		}
		#header{
			height: 100px;
			width: 1000px;
			margin-bottom: 5px;
			background-color: deepskyblue;
		}
		#nav{
			height: 25px;
			width: 1000px;
			margin-bottom: 5px;
			background-color:steelblue;
		}
		#main{
			height: 500px;
			width: 1000px;
			margin-bottom: 5px;
			/*background-color: deepskyblue;*/

		}
		#left{
			height: 500px;
			width: 100px;
			float: left;
			margin-right: 5px;
			background-color: deepskyblue;
		}
		#content{
			height: 500px;
			width: 790px;
			float: left;
			margin-right: 5px;
			background-color: lightskyblue;
		}
		#right{
			height: 500px;
			width: 100px;
			float: left;
			background-color: deepskyblue;
		}
		#footer{
			height: 80px;
			width: 1000px;
			background-color: deepskyblue;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="header"></div>
		<div id="nav"></div>
		<div id="main">
			<div id="left"></div>
			<div id="content"></div>
			<div id="right"></div>
		</div>
		<div id="footer"></div>



	</div>
</body>
</html>

Web前端开发——CSS布局与定位之浮动定位

 

 

 

 

 

 

相关标签： Web前端开发 CSS布局与定位 浮动定位

上一篇： php为什么要用apache

下一篇： webpack打包压缩js与css步骤详解

推荐阅读