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

最新推荐文章于 2023-06-25 15:11:00 发布

OSurer

最新推荐文章于 2023-06-25 15:11:00 发布

阅读量1.1k

点赞数 3

分类专栏： Web前端开发文章标签： CSS布局与定位浮动定位

本文链接：https://blog.csdn.net/wq_ocean_/article/details/104182635

版权

Web前端开发专栏收录该内容

26 篇文章 4 订阅

订阅专栏

1. 内容

<!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>

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

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

2. float

2.1 float用处

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

2.2 float属性特点

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

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

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

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

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

3. clear

3.1 clear属性

3.2 应用

3.2.1 单方向清除浮动的用法

清除后

测试时仅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 页脚清除浮动用法

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>

OSurer

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发——CSS布局与定位之浮动定位

目录1. 内容2.float2.1 float用处2.2float属性特点3. clear3.1 clear属性3.2 应用3.2.1 单方向清除浮动的用法3.2.2 页脚清除浮动用法4. 案例1. 内容<!DOCTYPE html><html><head> <meta http-equ...
复制链接

扫一扫