CSS学习10

乌鸦不像写字台

于 2024-09-03 19:07:12 发布

阅读量575

点赞数 9

分类专栏： css学习文章标签： css 学习前端

本文链接：https://blog.csdn.net/qq_54641174/article/details/141830008

版权

css学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS布局——浮动

前言
一、普通流
二、浮动
三、什么是浮动?
四、浮动的内幕特性
总结

前言

CSS盒子布具的三种机制：普通流（标准流）、定位、浮动。

一、普通流

普通流：网页内元素自上而下，从左到右排序。

二、浮动

浮动最开始的时候浮动是做文字环绕效果

<html>
<head>
	<style>
	div {
		width: 200px;
		height: 100px;
		margin: 0 auto;
	}
	img {
		float: right;
	}
	</style>
</head>
<body>
	<div>
	123899hj9d
	<img src="#.png" width="12" height="10" alt="">
	</div>
</body>
</html>

后来发现可以用浮动布局盒子

三、什么是浮动?

普通流改到浮动

<html>
<head>
	<style>
	div {
		width: 200px;
		height: 100px;
		background-color: pink;
		display: inline-block; /*转换为行内块元素，放到一行但是元素中间有空格*/
		float: left; /*左侧浮动 一行排列没有空隙*/
	}
	div:nth-child(2) {
		background-color: hotpink;
	}
	div:last-child {
		background-color: deeppink;
	}
	</style>
</head>
<body>
	<div>
	</div>
	<div>
	</div>
</body>
</html>

实现块级元素放在一行。用display转换为行内块元素，但是此时div之间的空格难以去掉。用float: left; 可以放在一行且没有空格。
元素的浮动指定了浮动属性的元素脱离标准流，移动到父元素中指定位置的过程。在CSS中用float属性来定义浮动，其基本语法格式：

float: left;
float: right;
float: none;

具体来说，浮动体现在脱离标准流，压在标准流上面。

<html>
<head>
	<style>
	div:first-child {
		width: 200px;
		height: 100px;
		background-color: pink;
		float: left; /*加入这行，第一个盒子浮动到最上面，第二个盒子在底层从左上开始*/
	}
	div:last-child {
		width: 200px;
		height: 700px;
		background-color: blue;
	}
	/*如果两个盒子不加浮动，都是标准流，块级元素自上而下显示*/
	</style>
</head>
<body>
	<div>
	</div>
	<div>
	</div>
</body>
</html>

四、浮动的内幕特性

浮动脱离标准流，不占位置，压在标准流上面。浮动只有左右浮动。

使用的时候需要首先创造包含块的概念，即浮动的元素找它最近的父级元素对齐，但不超出内边距。

<html>
<head>
	<style>
	.father {
		width: 200px;
		height: 100px;
		background-color: pink;
		border: 10px solid purple;
		padding: 10px;
	}
	.son {
		width: 100px;
		height: 50px;
		background-color: blue;
		float: left; 
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">
		</div>
	</div>
</body>
</html>

浮动元素的排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

<html>
<head>
	<style>
	section {
		width: 500px;
		height: 500px;
		background-color: pink;
		padding: 10px;
	}
	section div:first-child {
		width: 100px;
		height: 50px;
		background-color: blue;
		float: left; 
	}
	section div:last-child {
		width: 100px;
		height: 50px;
		background-color: purple;
		float: left; 
	}
	</style>
</head>
<body>
<section>
	<div>1</div>
	<div>2</div>
</section>
</body>
</html>

一个父盒子里面的子盒子，如果有一个子级有浮动，则其他子级都需要浮动。这样才能一行对齐显示。

元素添加浮动之后，具有行内块特性。元素的大小取决于定义的大小或者默认的内容大小。

<html>
<head>
	<style>
	div {
		width: 500px;
		height: 500px;
		background-color: pink;
		float: left;  /*块级元素浮动之后 具有行内块特性*/
	}
	span {
		height: 100px;
		background-color: hotpink;
		float: left;  /*行内元素浮动之后 具有行内块特性*/
	}
	/*行内块特性 可以一行放多个 具有宽度和高度 盒子的大小由内容决定*/
	</style>
</head>
<body>
<section>
	<div>1</div>
	<div>2</div>
	<span>123</span>
	<span>123</span>
</section>
</body>
</html>